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

Question

我正在尝试通过目标映射一个对象，以在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>

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 文档的这一节中，有人说：

可以将任何有效的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]}