无法通过父回调（案例数组和推送）看到子组件的更新

Question

如题。我尝试通过父级给出的回调从子级设置组件状态。演示在https://codepen.io/jadecubes/pen/wvYxKEL

回调看起来像

A = () => {
    const [info, setInfo] = useState(["Hello world."]);

    return (
        <>
            <B
                onChange={() => {/*I am callback*/
                    info.length = 0;
                    info.push("Hey!");
                    setInfo(info);
                }}
            />
            <h1>{info}</h1>
        </>
    );
};

单击按钮不会更改文本。但是如果像下面这样，它会正常变化。

A = () => {
    const [info, setInfo] = useState(["Hello world."]);

    return (
        <>
            <B
                onChange={() => {/*I am callback*/
                    setInfo(['hey']);
                }}
            />
            <h1>{info}</h1>
        </>
    );
};

欢迎任何建议。

Answer 1

React 状态是不可变的。

你不应该通过调用 push、pop 等方法来直接改变状态

您应该使用返回新数组的方法，例如 concat，...等

检查下面的 React 文档：

https://react.dev/learn/updating-arrays-in-state

Answer 2

您 不能使用 push 方法将存储在反应状态的数组中的项目推送，因为存储在反应状态的数组是不可变的。这是更新的代码。试试看：-

const { useState, useEffect } = React;

A = () => {
    const [info, setInfo] = useState(["Hello world."]);

    return (
        <>
            <B
                onChange={() => {
                    setInfo([
                      ...info,
                      "Hey!"
                    ]);
                }}
            />
            <h1>{info}</h1>
        </>
    );
};

B = (props) => {
    return (
        <>
            <button
                type="button"
                onClick={() => {
                    props.onChange();
                }}
            >
                Click Me!
            </button>
        </>
    );
};

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<A />);

您可以在react docs中阅读如何更详细地更新数组。

希望对您有所帮助