反应：无法在对象中呈现值答案

【问题标题】：React: Not able to render values in an Object反应：无法在对象中呈现值
【发布时间】：2020-05-24 05:49:48
【问题描述】：

我定义了一个组件，如下所示。 creativeList 包含我有兴趣显示的值。它包含以下内容：

creativeList = [{keyID: "AC072", cost: 1461, people: 520, cpp: "2.81"}, 
{keyID: "AC098", cost: 1600, people: 470, cpp: "3.4"}]

我希望能够通过在我的组件中返回 keyID 来显示它。我可以通过登录控制台来获取该值，但是，我无法返回它。有人可以帮帮我吗？

function DisplayList(props) {
    const creativeList = props.creativeList

    function ret(){
        creativeList.forEach(function(item){
            const i = item[0]

            console.log(i.keyID)

            return (
                <li>{i.keyID}</li>
            );
        })
    }

    return (
        <div>
            <li>List:</li>
            {ret()}
        </div>
    );
}

export default DisplayList;

【问题讨论】：

标签： javascript reactjs frontend react-component react-functional-component

【解决方案1】：

在 forEach 语句之前添加一个 return 语句并将 forEach 替换为 map

map 返回一个由其回调参数返回的元素组成的数组，这与 forEach 不同。

forEach 返回未定义，这就是您的列表未打印的原因。

function ret(){
        return creativeList.map(function(item){

            console.log(item.keyID)

            return (
                <li>{item.keyID}</li>
            );
        })
    }

【讨论】：

【解决方案2】：

试试这个。你错过了返回一个组件，当然你应该使用 map 而不是 foreach

import React from "react";

function DisplayList(props) {
  const creativeList = props.creativeList;


  function ret() {
    return creativeList.map(function(item) {
      const i = item;

      console.log(i.keyID);

      return <li>{i.keyID}</li>;
    });
  }

  return (
    <div>
      <li>List:</li>
      {ret()}
    </div>
  );
}

export default DisplayList;

【讨论】：

【解决方案3】：

forEach 没有办法停止，如果要返回，forEach 返回 undefined，请改用 map。工作示例：sandbox

【讨论】：

【解决方案4】：

您可以使用map 进行简化。还将key 属性添加到列表中的每个元素。

function DisplayList(props) {
  const { creativeList = [] } = props.creativeList;
  return (
    <div>
      <div>List:</div>
      {creativeList.map(({ keyID }) => (
        <li key={keyID}>{keyID}</li>
      ))}
    </div>
  );
}
export default DisplayList;

【讨论】：