如何修复错误对象是无效的反应子？

Question

我正在尝试通过一个对象映射，目的是在 ap 标记内呈现键及其值。 我有错误消息对象是无效的反应子。

我该如何克服这个错误？

        <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>

Answer 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>

Answer 2

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

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

此外，根据此列表， {[item]:features[item]}本身不是有效的表达式

因此，您必须嵌入 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>
)

Answer 3

这是因为您的代码中的双括号

像这样只使用一个括号

{[item]:features[item]}

Answer 4

以下是JSON

{[item]:features[item]}

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

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

Answer 5

像这样做

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