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

Question

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

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;

标签： javascriptreactjsreact-reduxcomponents

Answer 1

添加+将字符串值转换为数字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")