Question

请注意，我正在从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>
    );
}

有效。这是为什么？为何将其直接内联设置为行不通？

Answer 1

this.state.contactList[0]是undefined，在兑现承诺之前，因此this.state.contactList[0].link会引起错误。

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

class Test extends Component {
  // ...

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

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

反应：承诺完成后进行渲染

1 个答案: