Question

我已经创建了一个简单的对象

const customer = { name : "foo", phone : "519-500-5000", orders : { crust: "normal", toppings :  ["Cheese", "Bacon"]} }

它包含一个称为“ orders”的内部对象，该对象也具有一系列浇头，在这些情况下为“ Cheese”和“ Bacon”。

我已经将数组提取出来，并将其传递到了渲染顶部函数

 renderToppings (toppings) {
    console.log("render Toppings: ", toppings) // Renders the whole array of toppings, good.
    toppings.forEach(function (topping) {
        //return (
        //    <li> {topping} </li>
        //)
        console.log("each Topping: ", topping) // This DOES render each topping separately as expected. 
    });
}

我创建了一个具有其他值的列表，然后我最终调用了我的render方法（位于同一类中）

{this.renderToppings (PizzaToppings)}

控制台日志确实返回我期望的值。但是，当我取消对退货的注释时，它不会做控制台，也不会打印浇头。

我在这里想念什么？抱歉，如果这一切都很草率，我是新来的人。

Answer 1

您什么都不会返回。不使用forEach()回调的返回值。

使用map()来生成元素数组并将其返回

return toppings.map(function (topping) {
    return (
        <li> {topping} </li>
    );
});

演示

class Pizza extends React.Component {
  render() {
    var toppings = ['cheese', 'sausage', 'never pineapple'];
    var elements = toppings.map(topping => {
      return ( 
        <li> 
          {topping} 
        </li>
      );
    });

    return ( 
      <ul id = "toppings">
        {elements}
      </ul>
    );
  }
}

ReactDOM.render( 
  <Pizza /> ,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

您正在使用.forEach，并且forEach仅在数组的每个项目上调用给定方法，而对返回值不执行任何操作。

使用.map代替，map返回一个新数组。它还会在数组中的每个项目上调用一个方法，但允许您为它迭代的每个项目返回一个新值。

renderToppings (toppings) {
    toppings.map(function (topping) {
        return (
            <li> {topping} </li>
        )
    });
}

适合您的情况

Answer 3

forEach不返回任何内容（返回未定义），您需要使用map函数

renderToppings (toppings) {

    return toppings.map((topping) => {
        return (
            <li> {topping} </li>
        )

    });
}

Answer 4

.forEach中的回调会修改原始数组，但是要让React渲染元素，您应该使用.map创建一个新数组

反应渲染数组添加到列表-简单的返回不起作用

4 个答案: