Javascript 在React中传递道具和映射数据

我正在从事一个项目，该项目要求我将数据传递给两个功能组件

我对API的axios调用似乎起作用，并使用挂钩设置状态，但我一直收到以下两个错误：

错误

无法将未定义或null转换为object

我尝试检查数组是否为空，但这似乎无法解决问题

summaryMetrics

未定义-我不理解这一点，因为定义了

summartMetrics

。是否在提取数据之前显示元素 这是一个文件夹中的文件 包括API，以便人们可以看到JSON如何返回的结构。 我不确定我是否正确地传递和映射了数据

这是一个文件夹中的文件

---

非常感谢您的帮助，因为您所在的州有以下表格：

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

…您应该这样访问您的状态：

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

[...]

修复了代码沙盒（其他方面似乎出现了问题，白色屏幕，但语法错误已修复）：

以前的错误是：

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

Chrome dev tools是您的朋友，当一切都没有按预期发生时：）

顺便说一下，你可以

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

summary.summaryMetrics.map（s=>）

…而不是获取密钥，您可以简单地将整个summaryMetrics对象传递给SummaryByPlatform，并且只有一个道具。但这是另一个主题

---

祝你好运。

你的问题是你没有等待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();

常量renderSummaryMetrics=（）=>
总结&&
summary.summaryMetrics&&(
{Object.keys（summary.summaryMetrics）&&
Object.keys（summary.summaryMetrics）.length>0
？Object.keys（summary.summaryMetrics）.map（keyName=>(
))
：null}
);
返回renderSummaryMetrics（）；

有几个问题：

summaryMetrics

确实没有定义。它实际上被定义为

summary.summaryMetrics

summary.summaryMetrics[0][…]

将导致另一个“未定义的错误”，因为它是用默认值

null

定义的

问题1的解释： 不需要进一步解释

问题2的解释： React functional component中的

useffect

仅在呈现组件后运行

这意味着当执行

summary.summaryMetrics[0][…]

时，

summary.summaryMetrics

实际上是

null

，因为您将其定义为默认值。因此，后面的步骤将生成另一个错误，因为

null[0]

不可能

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

---

我无法向您展示如何更正代码，因为我需要更改您的大部分代码。您可以尝试的主要是先检查

summary.summaryMetrics

的值是否存在，然后再调用它的子属性。

如果

summary.js

更改为您建议的值，那么

useffect

调用将转到何处？错误仍然表明，

summaryMetrics

未在sandboxIt中定义无法读取summary.summaryMetrics上null的属性“0”，因为summary.summaryMetrics为null，但它并不表示summaryMetrics不再定义。请参阅有关此变量为null的原因的其他答案（基本上是：它已初始化为null，并且您正在尝试在调用useState设置它之前读取它）。已更新我的沙盒以添加空检查以防止此新错误，现在mocky.io请求上存在网络错误。我已将

summaryMetrics

的默认状态更新为

“0”

，它显示0，但在API请求后从未更新。

  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();