如何修复错误对象不是有效的反应子？答案

【问题标题】：How to fix error objects are not valid react child?如何修复错误对象不是有效的反应子？
【发布时间】：2022-07-10 20:01:08
【问题描述】：

我正在尝试映射一个对象，目的是在 p 标签中呈现键及其值。我有错误消息对象不是有效的反应子。

我该如何克服这个错误？

        <div className="d-flex flex-wrap">
              {
              
              Object.keys(features).map((item,index) => {           
                  console.log('type',item);
                  console.log(features[item]);
                  

                   return   <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2">{{[item]:features[item]}}</p> 
                      
               
              })
              }
          </div>

【问题讨论】：

标签： javascript reactjs object

【解决方案1】：

这个错误是因为代码

{{[item]:features[item]}}

实际上结果是一个对象。所以<p> 标签的孩子是一个对象。您可以通过在<p> 标签中使用模板文字来解决它

 <div className="d-flex flex-wrap">
          {
         
          Object.keys(features).map((item,index) => {           
              console.log({[item]:features[item]});
              console.log(features[item]);
              

               return   <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2" >{`{${item}: ${features[item]}}`}</p> 
                  
           
          })
          }
      </div>

【讨论】：

【解决方案2】：

在 React doc 的这一部分，据说：

您可以将任何有效的 JavaScript 表达式放在 JSX 中的花括号内

另外{[item]:features[item]}本身不是一个有效的表达式，根据this list

因此，您必须嵌入 2 个表达式，item 和 features[item]

return (
  <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2">
    {item}: {features[item]}
  </p>
)

【讨论】：

嗨@hgb123，我最初确实是这样设置的，但它给了我同样的错误

【解决方案3】：

这是因为你的代码中有双括号

像这样只使用一个括号

{[item]:features[item]}

【讨论】：

【解决方案4】：

以下是 JSON

{[item]:features[item]}

如果您打算将 JSON 呈现为字符串，请这样做。

JSON.stringify({[item]:features[item]})

【讨论】：

【解决方案5】：

这样做

Object.keys(features).map((item) => {   
return <p>  {item} : {features[item]}</p>
}

【讨论】：