反应承诺解决方案不会导致渲染

Question

所以我有一个组件执行通过 Promise 返回的 API 调用：

getStuff(url).then(val => this.setState(prevState => {prevState.alltime = val}));

这在 componentDidMount 中被调用，并成功解析为 state 中的数组。

我还有一个要将此数组映射到的组件，

 const relevantData = this.state[this.state.sortType];
let items= <p> no data</p>;
if (relevantData){
  items = relevantData.map((prop, i) => {
  prop.i = i;
  return(<BoardItem prop={prop} i={i} key={i}/>)})
}

然后在渲染函数中

<div> {items} </div>

当我在控制台中看到 promise resolve 时，什么都没有渲染，但是下次我渲染不相关的状态时（例如在 react devtools 中运行 $r.setState({test:'test}) ）一切都会渲染出来。

Answer 1

设置状态应返回表示（修改的）状态属性的单个对象。

在您的 componentDidMount 方法中，正确的语法是：

getStuff(url).then(val => this.setState({ alltime: val }));

请参阅https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly 了解更多信息。