reactjs - React 无法读取未定义的 setState

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)};
        });
    })
}

或者在构造函数中绑定(bind)方法:

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

按照您的编写方式，jsonList 未正确绑定(bind)，因此 - 您不能使用 this.setState，因为 this 未定义。