首页 > 解决方案 > 从 promise 数组中返回一个普通数组 - React

问题描述

我正在尝试每 1 秒创建一个包含某些数据的 Text 对象。数据以数组形式返回,但函数是异步的。

如果没有博览会抱怨,我似乎无法让它工作......

这是我的代码(我在搞乱它所以很多这只是虚拟的东西):

class TimeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: Date.now(), results: [] };
  }

  componentDidMount() {
      this.interval = setInterval(() => this.setState({ time: Date.now(), results: retrieveData().then(),
        do: Promise.all(retrieveData()).then(([x, y, z, a]) => {this.setState({results: })}) }), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <View style={styles.getStartedContainer}>
        {<Text>{this.state.do}</Text>}
      </View>
    );
  }
}

和我的异步功能

async function retrieveData() {
  let data = await C.all();
  var generalInfoArray = [data.c, data.d, data.r, data.a];
  return generalInfoArray;
}

标签: javascriptreactjs

解决方案


在 promise 得到解决后,您应该更改组件的状态。

componentDidMount() { 
  this.interval = setInterval( 
      () => { 
        retrieveData() 
         .then(data => { 
            this.setState({ 
               time: Date.now(), 
               results: data, 
               // ... 
             }) 
          }); 
       }, 
       1000 
    ); 
 }

推荐阅读