reactjs - React hooks 通过子节点更新父状态并重新渲染

Question

我有依赖于父状态的组件。当我将父级 useState Hook 传递给子级时，该组件似乎没有呈现。

在我的 ChildA 组件上，我调用了一个函数来执行 props.updateFiles()。 ChildB 即使在 prop 更改后也没有呈现任何内容。

const Parent = () => {
    const [files, setFiles] = useState([]);

    return (
      <div>
        <ChildA files={files} updateFiles={setFiles} />
        <ChildB files={files} updateFiles={setFiles} />
      </div>
    );
  };
export default Parent;

const ChildA = (props) => {
  const appendFile = () => {
    let old = props.files;
    old.push({ name: "asdf" });
    props.updateFiles(old);
  };

  return (
    <div >
        <button onClick={appendFile}>append file</button>
    </div>
  );
};
export default ChildA;

const ChildB = (props) => {

  const renderProps = (items) => {
    let out = items.map(({ name }, index) => <div>{name}</div>);
    return out;
  };

  return (
    <div>
      {renderProps(props.files)}
    </div>
  );
};
export default ChildB;

Answer 1

在将项目添加到数组时，您似乎没有正确使用 useState Hook 。您需要使用 ... 传播运算符。尝试将您的代码更改为如下内容:

const appendFile = () => {
   let old = props.files;
   props.updateFiles([...old, "asdf"]);
};

此外，在使用某些事件(例如 mousemove)时，您需要使用回调版本:

const appendFile = () => {
   props.updateFiles(oldArray => [...oldArray, "asdf"]);
};