如何修復錯誤對象是無效的反應子？

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