React 表第一次未更新值

Question

首次调用 SetState 时，React 表未更新的问题。 在下面的示例代码中，表中的InputBox显示了在类级别声明的toggleViewState变量的值

首次加载表单时，它会在表中正确地将值显示为 true

但是当点击按钮切换状态时，输入框在第一次点击时不会显示更新的值，只会在第二次点击时显示更新的值，值为 false

代码提取

const [toggleViewState, setToggleViewState] = useState(true); 

const columns = [
 {
      dataIndex: 'targetRowValue',
      key: 'temp',
      width: '20%',
      render: (text, record, index) => (
        <Input size="medium" value={toggleViewState}/>        
      ),
    },
  ];

const onSwitchViewState = () => {
  setToggleViewState(!toggleViewState);
}


return (
    <div>
      {targetData.length > 0 && (
        <Table
          data={targetData}
          style={{ wordBreak: 'break-all' }}
          columns={columns}
          striped          
        />
      )}
<div className="lmn-mt-3">
        <table>
          <tr>
            <td>`your text`
<Button onClick={onSwitchViewState}>Toggle View</Button>
</td>
</tr></table></div></div>

在声明列定义时尝试使用 useMemo hook add 添加对toggleViewState变量的依赖关系，但它不起作用`

Answer 1

你的问题大多缺乏数据，很难知道表里面发生了什么。状态更新得很好。不过看看代码我可以猜测一下。发生这种情况可能是因为 React 在 dom 更新期间没有看到您的

Input

元素有所不同。尝试向您的输入元素添加一个键：

 render: (text, record, index) => (
        <Input size="medium" value={toggleViewState} key={`${toggleViewState}-${index}`} />        
      ),