在 onClick 操作后，React 的动态表不会重新渲染答案

【问题标题】：React's dynamic table would not re-render after onClick action在 onClick 操作后，React 的动态表不会重新渲染
【发布时间】：2020-11-06 22:28:57
【问题描述】：

我有一个在更改后不会重新呈现自身的动态表。

  renderTableData(data) {
    this.setState({ rowData: data });
    const temp = this.state.rowData.map((row, index) => {
      return (
        <tr key={row.Dono}>
          // some codes here
          <td><button onClick={e => {
            let rowData = [...this.state.rowData];
            let data = { ...rowData[index] };
            // ignore the weird 'TRUE' & 'FALSE'
            if (this.state.rowData[index].DateReceived == 'null' || this.state.rowData[index].StockReceived == 'TRUE') {
              data.DateReceived = 'null';
              data.StockReceived = 'FALSE';
            } else {
              data.StockReceived = 'TRUE';
            }
            rowData[index] = data;
            this.setState({ rowData: rowData });
          }} >{this.state.rowData[index].StockReceived}</button></td>
        </tr>
      )
    });
    this.setState({ tableData: temp });
  }

按钮应在 onClick 事件后显示正确的 this.state.rowData[index].StockReceived 值。但是，它仍处于初始状态。

在onClick事件中再次调用renderTableData函数并没有重新渲染表格，而是在renderTableData之外调用函数。

我怀疑它与shouldComponentUpdate 有关，但我不确定。

代码沙盒：https://codesandbox.io/s/jovial-yalow-vsk09

注意：CodeSandbox 中的按钮需要点击两次才能呈现之前的状态，与浏览器完全不重新呈现不同。

【问题讨论】：

附上一个示例代码框可能会有所帮助，因为很难理解您问题的所有部分。
按照建议添加沙盒

标签： javascript reactjs onclick tableview

【解决方案1】：

您不应该尝试将 JSX 标记保留在本地状态。这是一个工作示例：https://codesandbox.io/s/stack-overflow-data-table-ifnrn

【讨论】：