React render array to add to a list - simple return not working

问题: I've created a simple object const customer = { name : "foo", phone : "519-500-5000", orders : { crust: "normal", toppings : ["Cheese", "Bacon"]} } it holds a intern...

问题:

I've created a simple object

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

it holds a internal object called "orders" that has also has an array of toppings, in these case "Cheese" and "Bacon".

I've extracted the array out and passed it into a render toppings function

 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. 
    });
}

I created a list that has other values, then I eventually called my render method (which is within the same class)

{this.renderToppings (PizzaToppings)}

the console log does return the values I was expecting. But when I uncomment out the return, it doesn't do the console nor does it print the the toppings.

What am I missing here? Sorry if this is all sloppy, I'm new to react.


回答1:

You aren't returning to anything. The return value of a forEach() callback is not used.

Use map() instead to generate an array of your elements and return that

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

Demo

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>


回答2:

forEach doesn't return anything(returns undefined), you need to use map function

renderToppings (toppings) {

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

    });
}

回答3:

You are using .forEach and a forEach only calls a given method on each item of the array and does nothing with the return value.

Use .map instead, map returns a new array. It also calls a method on each item in the array but allows you to return a new value for each item it iterates.

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

Would work in your case


回答4:

The callback in .forEach modifies the original array, but for React to render the element you should create a new array with .map

  • 发表于 2018-07-14 00:49
  • 阅读 ( 310 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除