React等待列表开发：如何跨组件更新状态并同步？

1. 是否需要给AddRow传入waitList和setWaitList？ #

你只需要传递setWaitList方法给AddRow（如果AddRow不需要读取当前列表内容，甚至不用传waitList）。因为React的状态更新依赖状态设置器（setter），而waitList状态托管在Home组件，必须把setWaitList通过props逐层传递下去：

• 先在Home组件给Header传递状态设置器：

  function Home() {
      const [waitList, setWaitList] = React.useState(WAITLIST);
  
      return (
          <div>
              <Container>
                  <Header onAddUser={setWaitList} />
                  <OnDeck someState={waitList} />
                  <MainList waitList={waitList} />
              </Container>
          </div>
      );
  }
  

• 接着Header组件接收该props，再传递给AddRow：

  const Header = ({ onAddUser }) => {
      return (
          <div>
              {/* 原有标题行代码... */}
              <Row>
                  <div>
                      <AddRow onAddUser={onAddUser} />
                      {/* 原有Next按钮代码... */}
                  </div>
              </Row>
          </div>
      );
  }
  

• 最后在AddRow组件中，表单提交时调用onAddUser更新列表（注意要创建新数组，不直接修改原状态）：

  const AddRow = ({ onAddUser }) => {
      const handleSubmit = (newUser) => {
          onAddUser(prevList => [...prevList, newUser]);
      };
  
      // 模态框和表单逻辑...
  }
  

2. 修改状态后MainList的表格会同步更新吗？ #

是的。只要你把waitList作为props传递给MainList组件，当setWaitList更新状态时，Home组件会重新渲染，MainList会接收到最新的waitList props并自动重新渲染，表格内容会同步更新。这是React单向数据流的核心逻辑，完全符合最佳实践。

关于原生DOM操作的问题 #

直接用原生DOM添加<tr>的方式违背了React的设计理念，React的核心是状态驱动UI：所有UI变化都应该通过修改状态触发，由React负责更新DOM。手动操作DOM会导致状态与实际UI不一致，后续维护难度极大。正确的做法是让MainList基于waitList props渲染表格行：

const MainList = ({ waitList }) => {
    return (
        <table>
            <tbody>
                {waitList.map(user => (
                    <tr key={user.id}>
                        <td>{user.name}</td>
                        <td>{user.contact}</td>
                        {/* 其他用户信息列 */}
                    </tr>
                ))}
            </tbody>
        </table>
    );
}

内容的提问来源于stack exchange，提问作者Miguel G