如何在 React 中刷新映射表？

Question

我正在从存储在 React 状态中的映射元素呈现一个表格。但是，tr 行元素不会在 tbody 组件中呈现，即使控制台命令显示数据存在。从this.state.tableData 渲染表格行的代码是：

componentWillMount() {
    let data = this.props.dbPersons.get("directory");
    this.setState({ tableData: data });         
}

...

renderTableData() {
    return this.state.tableData.map((student, index) => {
      const { id, person } = student; 
      console.log("id'", id);
      console.log("person.lastName", person.lastName);

      return (
        <tr key={index}>
          <td>{id}</td>
          <td>{person.lastName}</td>
        </tr>
      )
    })
}

tbody 如果 tableData 存储在 state 中，则渲染：

{this.state.tableData && <tbody>
  {this.renderTableData()}
</tbody>}

但是当页面打开时，控制台会显示行数据，但 tbody 渲染时没有任何行。为什么？组件是否需要以某种方式刷新？ tbody 组件是否已经渲染并且无法更新？

Answer 1

除了导致警告的 componentWillMount（将其替换为 compontDidMount）之外，到目前为止您发布的代码没有任何问题。我看不出它会记录但不渲染的原因。这是您的代码的一个工作示例：

class App extends React.Component {
  state = { tableData: false };
  componentWillMount() {
    setTimeout(
      () =>
        this.setState({
          tableData: [{ id: 1 }, { id: 2 }],
        }),
      500
    );
  }
  renderTableData() {
    return this.state.tableData.map((student, index) => {
      const { id } = student;
      console.log('id', id);
      return (
        <tr key={index}>
          <td>{id}</td>
          {/* <td>{name}</td> removed this but still can see id*/}
        </tr>
      );
    });
  }
  render() {
    return (
      <table>
        {this.state.tableData && (
          <tbody>{this.renderTableData()}</tbody>
        )}
      </table>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

也许您可以提供一个简单的示例来演示您正在经历的行为。

Answer 2

renderTableData() {
  var data = this.state.tableData.map((student, index) => {
    const { id, person } = student; console.log("id'", id);
    console.log("person.lastName", person.lastName);
    return (<tr key={index}>
      <td>{id}</td>
      <td>{person.lastName}</td>
    </tr>)
  })
  return data;
}