Question

我花了很长时间试图弄清楚究竟是什么问题。我有一个react组件从服务中获取一组用户，然后将其存储在组件状态，但为了简单起见，我在这里进行了硬编码。当我运行我的页面时，没有任何显示，控制台中没有任何错误迹象。我是新手，请耐心等待我。

这是我的组件：

var usersTable = React.createClass({
      getInitialState: function() {
        this.state = {
          users: [],
          dataResponse: []
        };

        return this.state;
      },
      getData: function() {

        component.state.dataResponse.push({
          name: "john doe",
          email: "john.d@outlook.com",
          job: "production manager",
          id: 882771
        });

        component.state.dataResponse.push({
          name: "jane doe",
          email: "jane.d@outlook.com",
          job: "account manager",
          id: 569811
        });
        //get the users from a service.

      },
      componentWillMount: function() {
        this.getData();

        if (this.state.dataResponse !== null && this.state.dataResponse !== undefined) {
          var data = this.state.dataResponse;

          for (var i = 0; i < data.length; i++) {
            var tr = <tr>
              <td> {
                data[i].id
              } </td> <td> {
                data[i].name
              } </td> <td> {
                data[i].job
              } </td> <td> {
                data[i].email
              } </td> </tr>;
            this.state.users.push(tr);
          }
        }
      },
      render: function() {
        return ( <table className = "table table-condensed"> {
            this.state.users
          } </table>);
        }
      });

    ReactDOM.render( <usersTable /> , document.getElementById("usersComponentDiv"));

普兰克：https://plnkr.co/edit/CyYCgTArt7K5MLAbiCa7?p=preview

Answer 1

要更改组件的状态，请使用：

this.setState({
  users: [...]
})

或

this.setState({
  dataResponse: [...]
})

尝试使用this.state.users.push(..)或this.state.dataResponse.push(...)不起作用。

我还注意到您正在使用状态来保存HTML标记（例如td和tr），由于性能原因，这不是一个好的模式。最好只保留一组仅包含id，name，job和email的对象。

请注意，setState为asynchronous，如果您尝试以下情况，您将无法立即访问州的最新价值：

this.setState({
  users: [{ id: 1 }, { id: 2 }]
})

this.state.users // outdated version

如果您需要访问其最新值，请使用：

this.setState({
  users: [{ id: 1 }, { id: 2 }]
}, () => {
  console.log(this.state) // new state version
})

如果您还需要在>更新新状态之前访问旧状态，您还可以选择：

this.setState(prevState => ({ users: [...prevState.users, { id: 3 }, { id: 4 }], }), () => { console.log(this.state) // new state })

从状态加载数据时，不会呈现React组件

1 个答案: