React：console.log 按钮单击处理程序未显示更新状态

Question

我正在构建一个 React 应用程序，其中有一个按钮可以将当前状态记录到控制台。但是，按钮的 onClick 处理程序内的 console.log 始终记录初始状态，而不是更新后的状态。这是我的代码：

export default function App() {
  const [users, setUsers] = React.useState([]);
  const [name, setName] = React.useState('');

  const addUser = () => {
    const obj = {
      name: 'old user name',
      updateName: (
        <button onClick={() => setName('new user name')}>update name</button>
      ),
      showName: <button onClick={() => console.log(name)}>show name</button>,
    };
    setUsers([obj, ...users]);
  };

  return (
    <div>
      <button onClick={addUser}> add user</button>
      {users &&
        users.map((user) => (
          <div>
            {user.name}
            {user.updateName}
            {user.showName}
          </div>
        ))}
    </div>
  );
}

当我单击“更新名称”按钮时，它会按预期将名称状态更新为“新用户名”。但是，当我单击“显示名称”按钮时，它会记录名称的初始状态（空字符串）而不是更新后的状态（“新用户名”）。

我将 console.log 调用移至组件外部的单独函数，但它仍然记录初始状态。

如何使按钮的 onClick 处理程序内的 console.log 反映更新后的状态？

如有任何帮助，我们将不胜感激！

Answer 1

这个：

<button onClick={() => console.log(name)}>show name</button>

正在捕获该状态值，并且当该状态值发生变化时永远不会更新。

不要存储组件/功能/等。处于状态。 将data存储在状态中。 组件的渲染可以从该数据构建它所需的结构。

在这种情况下，这应该意味着只需从状态中删除这些按钮并在需要时渲染它们。 例如：

export default function App() {
  const [users, setUsers] = React.useState([]);
  const [name, setName] = React.useState('');

  const addUser = () => {
    const obj = {
      name: 'old user name',
    };
    setUsers([obj, ...users]);
  };

  return (
    <div>
      <button onClick={addUser}> add user</button>
      {users &&
        users.map((user) => (
          <div>
            {user.name}
            <button onClick={() => setName('new user name')}>update name</button>
            <button onClick={() => console.log(name)}>show name</button>
          </div>
        ))}
    </div>
  );
}

---

值得注意的是，为了实现您可能尝试构建的功能，您可能需要编写更多代码。 您这里的内容似乎还没有完成，大部分只是测试功能作为概念证明。 这个答案并不试图推测预期的功能，只是试图纠正手头的具体问题。