React中传递道具和映射数据

Posted 2023-02-23

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

我对API的axios调用似乎可以正常工作，并且可以通过钩子设置状态，但是我一直收到这两个错误：

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

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

这里是codesandbox中的文件

非常感谢您的帮助

答案

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

另一答案

有几个问题：

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

问题1的说明：

不需要进一步的解释。

问题2的解释

useEffect在React功能组件中将仅在组件呈现后[中运行。

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

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

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

另一答案

由于您所在的州采用这种形式：

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"]
固定的固定代码沙箱
（虽然其他东西似乎出了问题，白屏，但语法错误已修复）
：
先前的错误是：

[mocky.io通过HTTP提供内容，通过HTTPS提供代码沙箱，因此出现了混合内容问题：Chrome不允许这种混合使用协议，通过使用HTTPS协议从mocky.io获取信息即可解决，
• 在地图功能中，SummaryByPlatform组件没有唯一键
• Chrome开发工具是您的朋友，当一切都没有发生时:)。

  通过您可能的方式

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

...代替获取键，您可以将整个summaryMetrics对象传递给SummaryByPlatform并只有一个道具。但这是另一个主题。
祝你好运。>>