javascript - 当将组件存储在状态中时，当其 Prop 发生更改时，它不再重新渲染？

Question

在特定的业务案例中，我有一系列以线性方式布局的组件，但其顺序可能会发生变化。例如，我们有一个父组件:

export const Component = () => {

    const [data, setData] = useState(null);

    const [nextComponent, setNextComponent] = useState(null);

    return (
        //... component code here
        {nextComponent}
    );
}

在Component代码中将有一些按钮，可以更改接下来要出现的组件:

onClick={() => setNextComponent(<SomeComponent data={data} setData={setData} />)}

如果通过在 SomeComponent 中调用 setData 来更改 data，则该组件不会使用新的 data 重新渲染> 支撑值。

我知道这与存储在状态中的 SomeComponent 有关，但无法理解为什么 data 没有在 SomeComponent 中更新- data 肯定只是一个指向内存位置的指针，因此在父级和子级中应该具有相同的值？

Answer 1

这是因为data prop 仅更新为 SomeComponent当函数 setNextComponent被称为 onClick 的一部分打回来。

执行此操作的“正确方法”是保存对 SomeComponent 重要的数据。处于其父级的状态，然后将其作为该子级的条件渲染的一部分传递下去。

const ChildComponent = ({ data, setData }) => (
  <React.Fragment>
    <span>Current Data: {JSON.stringify(data)}</span>
    <input onChange={({target}) => setData(target.value)} placeholder="Enter New Data" />
  </React.Fragment>
);

const ParentComponent = () => {
  const CHILD_TYPES = { signIn: SomeComponent, signOut: OtherComponent };

  // keep track which component you want to be showing based on parent state
  const [activeComponentType, setActiveComponentType] = useState('signIn');

  // keep track of the data required for the child component(s)
  const [data, setData] = useState(null);

  // find and use the correct class for the current child type
  // (you could do this without an extra variable by using `React.createClass`)
  const ActiveComponentClass = CHILD_TYPES[activeComponentType];
  return (<ActiveComponentClass data={data} setData={setData} />);
}

此外，您应该考虑不要将组件存储在状态中。这是不好的做法，通常不会按您期望的方式工作。