Question

我想知道什么是传递道具然后在需要首先获取道具并且页面加载时尚未准备就绪的情况下在道具上进行映射的正确方法。

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
会把道具装进孩子的国务中吗？

Answer 1

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

在父组件中，我们需要以下内容：

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

然后我们可以在其render方法中完成

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

这样，只有在获得一些结果后，组件才会呈现。

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

import PropTypes from "prop-types";

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

Answer 2

看起来您的Api返回一个对象，因此在构造函数中将结果初始化为对象而不是数组。下面的条件检查将确保当Api响应将结果设置为undefined或结果不包含项目或项目不是数组时，它不会引发任何错误。因此，这些条件检查必须更加安全，以确保结果是一个对象，并在其中包含items关键字，而items是一个数组。

如果直接检查this.state.results.items，则当Api响应中不包含项目键时，代码将失败，或者项目不是数组，则代码将失败，因此最好在进行.map <前进行必要的检查/ p>

const SearchResults = (props) => {
    const { results } = props;
    const items = results && results.items && Array.isArray(results.items) && props.results.items.map(item => {
        return (
            <div>{item.url}</div>
        )
    })

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

        {items}

        </div>
    )
}

用异步数据传递道具

2 个答案: