在React中传递道具并映射数据

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.summaryMetrics[0]["uniqueSocialMediaPost"]

修复了固定代码沙箱（虽然其他东西似乎出了错，白屏，但语法错误已修复）：

先前的错误是：

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

当没有发生任何预期的事情时，Chrome开发者工具将是您的朋友：）。

尽你所能

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

...而不是获取密钥，您只需将整个summaryMetrics对象传递给SummaryByPlatform并只有一个道具即可。但这是另一个主题。

祝你好运。

Answer 2

您的问题是您不等待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();

Answer 3

有几个问题：

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

问题1的解释：

不需要进一步的解释。

问题2的解释：

React功能组件中的

useEffect仅在呈现该组件后 运行。

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

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

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