时间戳

首页 > 解决方案 > 反应：承诺完成后触发渲染

reactjs - 反应：承诺完成后触发渲染

问题描述

请注意，我从 AWS DynamoDB 获取数据。

...
class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
          contactList: []
        }
    }
    componentDidMount() {
        var getItemsPromise = db.scan({ TableName: "tester" }).promise();
        getItemsPromise.then((data) => this.setState({ contactList: data.Items }));
    }
    render() {
        return (
            <div>{this.state.contactList[0].link.S}</div>
        );
    }
}
export default Test;

我正在尝试呈现返回的值，但不能。如果我设置

render() {
    console.log(this.state.contactList[0].link.S);
    return (
        <div>test</div>
    );
}

有用。这是为什么？为什么当我将它直接设置为内联时它不起作用？

标签： reactjs

解决方案

this.state.contactList[0]是undefined在promise被解决之前，所以this.state.contactList[0].link会产生错误。

例如，您可以null从 render 方法返回，直到数组被您的对象填充：

class Test extends Component {
  // ...

  render() {
    if (this.state.contactList.length === 0) {
      return null;
    }

    return <div>{this.state.contactList[0].link.S}</div>;
  }
}

推荐阅读