javascript - React.js 异步操作 setState 返回 null

Question

我使用异步操作从我自己的 API 获取数据，但有时反应不会等待操作完成，因此我的状态对象返回 null 并导致 null 错误。

构造函数：

 constructor(props) {
    super(props);
    this.openCase = this.openCase.bind(this);
    this.state = {
      reward: {},
      skins: [],
      caseImg: ""
    };
    this.fillCase = this.fillCase.bind(this);
  }

我的获取代码：

 fillCase = async () => {
    const link = encodeURI("https://localhost:44390/api/getskins");
    const response = await fetch(link);
    const data = await response.json();
    this.setState({ skins: data });
  };

我在组件安装之前调用了 fillCase：

componentWillMount(){
this.fillCase();
}

什么是错误？

标签： javascriptreactjsfetch

Answer 1

看起来data您从服务器获取的内容包含一些空值。

尝试在接收数据时将其打印出来，也尝试对其进行过滤：

fillCase = async () => {
    const link = encodeURI("https://localhost:44390/api/getskins");
    const response = await fetch(link);
    const data = await response.json();
    console.log(data);
    this.setState({ skins: data.filter(d => d) });
};