Question

我试图通过在componentDidMount阶段进行api调用来更新状态。

我要做的是显示用户名。很少有将名称设置为初始状态的方法，可以很好地工作。然后我需要追加更多用户，通过点击get api返回该用户。

伪代码：

export class UserDetails extends Component {
constructor(props) {
    super(props);
    this.state = {
        users: [
            {
              id: 1,
              name: "aditya"
            }
        ]
    };
}
componentDidMount() {
    this.jsonList();
}

jsonList() {
    axios('https://api.myjson.com/bins/1fwkrw').then(function(response) {
        this.setState((prevState) => {
            {users: users.push(response.data.userdata)};
        });
    })
}

render() {
    return (
        <div className="users">
            {this.state.users.map(user => {
              return (
                <div>
                  <div key={user.id}>{user.name}</div>
                </div>
              )
            })}
        </div>
    );
}
}

但是在这里我得到了错误“未处理的拒绝（TypeError）：无法读取未定义的属性'setState'”。对我要去哪里有帮助吗？

Answer 1

将jsonList更改为箭头功能：

jsonList = () => {
    axios('https://api.myjson.com/bins/1fwkrw').then(function(response) {
        this.setState((prevState) => {
            {users: users.push(response.data.userdata)};
        });
    })
}

或将方法绑定到构造函数内部：

constructor(props) {
    super(props);
    this.state = {
        users: [
            {
              id: 1,
              name: "aditya"
            }
        ]
    };
   this.jsonList = this.jsonList.bind(this);
}

您编写它的方式jsonList未正确绑定，因此-您无法使用this.setState，因为this未定义。

Answer 2

您需要将this绑定在axios promise中，也不要使用concat而不是push

更改状态 >

axios('https://api.myjson.com/bins/1fwkrw').then((response) => {
        this.setState((prevState) => {
            return {users: prevState.users.concat(response.data.userdata)};
        });
    })

Answer 3

您必须使用 es6 箭头将其自动绑定到合成处理程序。

jsonList = () => {
axios('https://api.myjson.com/bins/1fwkrw').then(function(response) {
    this.setState((prevState) => {
        {users: users.push(response.data.userdata)};
    });
})
}

您的组件将重新呈现，因为这就是使用 Virtual Dom 概念的反应方式。它将看到更改并仅更新组件的该部分。这并不意味着组件将再次完全安装在DOM中。希望对您有帮助

React无法读取未定义的setState

3 个答案: