在 React 中传递 props 和映射数据

Question

我正在处理一个需要我将数据传递给两个功能组件的项目。

我对 API 的 axios 调用似乎可以正常工作，以及使用钩子设置状态，但我不断收到以下两个错误：

1. 错误Cannot convert undefined or null to object我尝试检查数组是否为空，但似乎并没有解决问题
2. summaryMetrics 未定义 - 我不明白，因为 summartMetrics 已定义。可能是在获取数据之前显示元素吗？

这是codesandbox 中的文件 包含 API，因此人们可以看到 JSON 的返回结构。 我不确定我是否正确地传递和映射数据。

这是codesandbox中的文件

非常感谢任何帮助

Answer 1

因为你的州有这种形式：

const [summary, setSummaryData] = useState({
  summaryMetrics: null,
  platformsData: null
});

...你应该像这样访问你的状态：

<SummaryMetrics
  uniqueSocialMediaPost={summary.summaryMetrics[0]["uniqueSocialMediaPost"]}
  positiveScore={summary.summaryMetrics[0]["positiveScore"]}
  riskScore={summary.summaryMetrics[0]["riskScore"]}
/>

[...]

注意“summaryMetrics”之前的“summary.”：

summary.summaryMetrics[0]["uniqueSocialMediaPost"]

Fixed Fixed Code Sandbox （其他的东西好像出了问题，白屏，但是语法错误是固定的） :

之前的错误是：

• mocky.io 通过 HTTP 提供内容，通过 HTTPS 提供代码沙箱，因此混合内容问题：Chrome 不允许这种混合协议，通过使用 HTTPS 协议从 mocky.io 获取信息来修复，
• 地图函数中的 SummaryByPlatform 组件没有唯一键

Chrome 开发工具是您的朋友，当没有任何事情发生时 :)。

顺便说一句，你可以

summary.summaryMetrics.map(s => <SummaryByPlatform summaryMetrics={s} />)

...而不是获取键，您可以简单地将整个 summaryMetrics 对象传递给 SummaryByPlatform 并且只有一个道具。但那是另一个话题了。

祝你好运。

Answer 2

有几个问题：

1. summaryMetrics 确实没有定义。它实际上被定义为summary.summaryMetrics。
2. summary.summaryMetrics[0][...] 将导致另一个“未定义错误”，因为它是使用默认值 null 定义的。

问题一说明：

无需进一步解释。

问题2说明：

useEffect 在 React 功能组件中只会在组件被渲染之后运行。

这意味着当你执行summary.summaryMetrics[0][...]时，summary.summaryMetrics实际上是null，因为你将它定义为默认值。因此，后面的步骤会产生另一个错误，因为null[0] 是不可能的。

您需要做的是在调用属性之前检查树下的每个对象属性是否实际上是有效对象。否则，错误将沿着属性树发生。

我无法向您展示如何更正您的代码，因为我需要更改您的大部分代码。您可以尝试主要检查 summary.summaryMetrics 的值是否存在，然后再调用它的子属性。

Answer 3

您的问题是您没有等待 summaryMetrics 加载。它试图在读取数组之前读取它。

我要做的是将渲染放在一个函数中，并在数据可用时有条件地加载它。

所以您的 Summary.js 文件将如下所示：

  const renderSummaryMetrics = () => 
    summary && 
    summary.summaryMetrics && (
    <div>
      <SummaryMetrics
        uniqueSocialMediaPost={summary.summaryMetrics[0]["uniqueSocialMediaPost"]}
        positiveScore={summary.summaryMetrics[0]["positiveScore"]}
        riskScore={summary.summaryMetrics[0]["riskScore"]}
      />
      {Object.keys(summary.summaryMetrics) &&
      Object.keys(summary.summaryMetrics).length > 0
        ? Object.keys(summary.summaryMetrics).map(keyName => (
            <SummaryByPlatform
              platform={keyName}
              mean_sentiment={summary.summaryMetrics[keyName].mean_sentiment}
              post_count={summary.summaryMetrics[keyName].post_count}
              positive_posts={summary.summaryMetrics[keyName].positive_posts}
              negative_posts={summary.summaryMetrics[keyName].negative_posts}
            />
          ))
        : null}
    </div>);

    return renderSummaryMetrics();