reactjs - 使用异步数据传递 props

问题描述

我想知道当需要先获取道具并且在页面加载时还没有准备好时，传递道具然后映射它们的正确方法是什么。

当前map中断页面，因为在获取数据并作为道具传递之前加载页面时数组未定义。

活动总结：

父组件发出 API GET 请求，将响应置于状态
父组件将信息从状态传递到子组件（名为 SearchResults）

<SearchResults results={this.state.results} />

这就是子组件的样子。

const SearchResults = (props) => {

    const items = props.results.items.map(item => {
        return (
            <div>{item.url}</div>
        )
    })

    return (
        <div className="results">
          <h3>Results:</h3>

        {items}

        </div>
    )
}

我正在考虑以下内容，但想知道什么是好方法。

生命周期喜欢componentDidMount()或componentWillReceiveProps()
使用if语句检查是否定义了 props - 但限制对if块内变量的访问
使用default props
将道具加载到孩子的状态中会起作用吗？

标签： reactjsdictionary

正如@Think-Twice 指出的那样，我们正在对父组件的状态进行假设。

在父组件中，我们需要类似：

constructor() {
  this.state = {
    results: {items: []}
  }
}

然后在它的渲染方法中我们可以做

{this.state.results.items.length ? <SearchResults results={this.state.results} /> : null}

这样组件在有一些结果之前不会渲染。

要进一步验证结果，您可以在上设置 proptypes SearchResults，例如：

import PropTypes from "prop-types";

SearchResults.propTypes = {
  results: PropTypes.shape({
    items: PropTypes.array
  })
}

reactjs - 使用异步数据传递 props

问题描述

解决方案

推荐阅读