Question

我当前的状态是一个对象数组。我正在映射它们，我正在得到我想要的东西。但是，在我的对象数组中，我没有收到我想要的成分。我正在接收该值的console.log，但它自己的值我没有在dom上显示任何内容。继承我的代码。我试图将我的成分显示在我正在映射的li中，但是当我点击我的面板时，我没有收到任何价值。但是，我的console.log下面显示了一个值。 IDK的...

import React from 'react';
import Accordian from 'react-bootstrap/lib/Accordion';
import Panel from 'react-bootstrap/lib/Panel';
import Button from 'react-bootstrap/lib/Button';
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
import Modal from 'react-bootstrap/lib/Modal';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import FormControl from 'react-bootstrap/lib/FormControl';

export default class App extends React.Component {
  constructor () {
    super();

    this.state = {recipes: [
      {recipeName: 'Pizza', ingredients: ['Dough', 'Cheese', 'Sauce']},
        {recipeName: 'Chicken', ingredients: ['Meat', 'Seasoning', 'other']},
          {recipeName: 'Other', ingredients: ['other1', 'other2', 'other3']}
    ]};
    console.log(this.state.recipes);
  }
  render() {
    const recipes = this.state.recipes.map((recipe, index) => {
      return (
          <Panel header={recipe.recipeName} eventKey={index} key={index}>
            <ol>
              {recipe.ingredients.map((ingredient) => {
                <li> {ingredient} </li>
                console.log(ingredient);
              })}
            </ol>

          </Panel>
      )
    });
    return (
      <div className="App container">
         <Accordian>
          {recipes}
         </Accordian>
      </div>
    )
  }
}

Answer 1

因为你没有从内部地图体返回任何东西。

像这样写：

{recipe.ingredients.map((ingredient) => {
    console.log(ingredient);
    return <li key={...}> {ingredient} </li>      //use return here
})}

或者你可以这样写：

{
   recipe.ingredients.map((ingredient) => <li key={...}> {ingredient} </li>)
}

根据 MDN Doc ：

箭头功能可以是“简洁的身体”或通常的“块”   体”。

在一个简洁的正文中，只需要一个表达式，一个隐含的表达式   返回附上。在块体中，您必须使用显式返回   言。

查看MDN文档，了解有关Arrow Function的详细信息。

对象数组

1 个答案: