ReactJS:将状态值设置为数组的正确方法是什么?

时间:2017-08-16 12:06:49

标签: javascript node.js reactjs fetch-api

我有一个使用fetch API获取用户数据的对象数组。我试过构造函数,创建一个函数,绑定它。它没用。我尝试了ComponentDidMount和setState,它返回undefined。

class Admin extends Component {


    componentDidMount () {

        var that = this;
        fetch('http://localhost:4500/data/users', {
            method: 'GET',
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            }
         }).then(function(response) {
             return response.json();
        }).then(function(json){
             console.log(json);
             that.state = {users: json};
        });

    }

    render() {

     return (

        <SpicyDatatable
          tableKey={key}
          columns={columns}
          rows={this.state.users}
          config={customOptions}
        />
       );
    }
}

将状态值设置为数组并呈现它的正确方法是什么?感谢

3 个答案:

答案 0 :(得分:2)

首先在你的构造函数中初始化你的状态

constructor(props) {
        super(props);
        this.state = {users : []} //initialize as array
    }

然后使用

代替that.state = {users: json};设置您的状态
that.setState({ users: json });

答案 1 :(得分:1)

您应该使用React setState()方法。

that.setState({ users: json });

答案 2 :(得分:0)

您已经得到了使用setState({ users: json })的答案,这是正确的。

作为初始化数组值的替代方法,如abul所述,您还可以执行条件渲染,具体取决于组件状态。即,如果用户尚未加载,您可以呈现不同的组件。

render() {
   const users = this.state.users;
   return !users ?
      <p>Loading..</p> : 
      <YourComponent users={users} />;
}