React - JSX 在条件渲染上没有改变答案

【问题标题】：React - JSX is not changing on conditional renderingReact - JSX 在条件渲染上没有改变
【发布时间】：2020-12-16 20:15:40
【问题描述】：

我正在我的代码中进行条件渲染，其中我需要根据每次更改时的状态更改调用的组件。默认选项是未付。当我选择第一次付费时，状态更改为已付费，组件也更改为已付费，但之后如果我更改为未付费状态正在更改，但组件被卡在已付费状态。可能是什么问题？附上代码。

import React, { useState } from "react";

import Paid from "./Paid";
import Unpaid from "./Unpaid";

const Payment = () => {
    const [paid, setPaid] = useState(0);

    return (
        <React.Fragment>
            <div className="container">
                <br />
                <div className="row">
                    <div className="col-sm-4">
                        <select
                            className="browser-default custom-select"
                            onChange={(option) => setPaid(option.target.value)}
                            required
                        >
                            <option value="0">Unpaid</option>

                            <option value="1">Paid</option>
                        </select>
                    </div>
                    <div className="col-sm-8"></div>
                </div>
                <br />
                <div>{paid ? <Paid /> : <Unpaid />}</div>
            </div>
        </React.Fragment>
    );
};

export default Payment;

【问题讨论】：

标签： javascript reactjs react-redux components

【解决方案1】：

您需要解析option.target.value，因为它总是评估为true，因为输入总是输出一个字符串，这总是真实的。

onChange={(option) => setPaid(JSON.parse(option.target.value))}

【讨论】：

知道了兄弟。谢谢

【解决方案2】：

添加+将字符串值转换为数字0或1

 onChange={(option) =>{let val=+option.target.value ;setPaid(val);}}

let a="0"
let b="1"

console.log(+a,+b)
let c=+a
 c? console.log("test 1"):console.log("test 2")

【讨论】：

很好的答案。使用+ 运算符是一种极好的速记方法。
我用它来避免使用parseFloat 或parseInt 但如果它没有在+a? console.log("test 1"):console.log("test 2") 这样的地方进行评估，你应该将它分配给另一个变量然后使用那个变量

【解决方案3】：

这样更新你的状态

({ target: { value } }) => setPaid(value)

【讨论】：