Question

我正在制作一个基本的计算器，我的解决方案是制作一个历史记录数组，然后通过循环运行它以编译结果，但是我遇到一个问题，即在更新历史记录数组时视图不会更新

    function CalcBuilder() {
    function WriteNum(number) {
        let TempHistory = History;

        TempHistory.push(number);

        setHistory(TempHistory);
        console.log(History);
    }

    const [
        History,
        setHistory,
    ] = useState([
        0,
    ]);

    let CalcItems = [];
    CalcItems.push(
        <h1 key='display' className='displayed'>
            {History.toString()}
        </h1>,
    );
    CalcItems.push(
        <h1 key={1} className='element' onClick={() => WriteNum(1)}>
            1
        </h1>,
    );
    function Add() {
        let TempHistory = History;
        TempHistory.push('+');
        setHistory(TempHistory);
    }
}
    return <div className='grid'>{CalcBuilder()}</div>;

为什么会出现这种情况，我需要以某种方式手动更新JSX还是它本身的代码有问题？

Answer 1

TmpHistory可能是对History的引用，因此对其进行修改与修改History相同，而当您直接修改状态对象时，React不喜欢。

而不是像这样在History和WriteNum中制作Add的副本：

 let TempHistory = [...History];

状态更改后，React不更新视图

1 个答案: