Реагировать JS - data.map не может создать список с данными

Question

Я получил data.js файл с некоторой базисной c информацией для еды, такой как:

export default [
    {
        "name": "Crock Pot Roast",
        "information":[
            {
                "date":"24 July 2019",
                "type": "Main dish",
                "difficulty": "Easy",
                "time": "~50",
            }
        ],
        "ingredients": [
            {
                "quantity": "1",
                "name": " beef roast",
                "type": "Meat"
            }
        ],
        ...
        Some more data
        ...
    }
   ]

Я хочу создать список по реакции, который может получить все элементы из data.information, функция которых будет правильной использовать?

Я получаю такие данные:

const getData = data.map(food => {
    return (
        <div key={food.name}>
            <span>{food.name}</span>
            <div>
                <div>
                    <img src={food.imageURL} alt={food.name} />
                    <div>
                        <ul>{getFoodInformation}</ul>
                    </div>
                </div>
            </div>

            <div>food ingredients</div>

            <div>food recipe</div>
        </div>
    );
});

, но я не могу использовать food.information.map для создания списка, подобного:

<ul>{food.information.map((info) => <div key={info.date}>{info}</div>) }</ul>

Любые идеи, возможно, использовать другую функцию, а не карту?

Answer 1

Вы правы в том, что в этой строке проблема:

<ul>{food.information.map((info) => <div key={info.date}>{info}</div>) }</ul>

Но , .map() не проблема. Ваши information данные - это массив, поэтому вы можете .map() это с помощью JSX.

Ваша проблема заключается в следующем:

<div key={info.date}>{info}</div>

info является объект, и React не знает, как напечатать объект "красиво". Вы хотите использовать строковые данные (например, {info.type}).

Если вам нужно вывести полный объект, используйте JSON.stringify, например:

<div key={info.date}>{JSON.stringify(info)}</div>

Answer 2

React не отображает массив / объект в список по умолчанию. Вы должны быть явными в своем коде.

Ваша первая попытка «закрыть» для исправления, однако вы можете заметить, что ингредиенты и информация являются массивами объектов. это означает, что вы должны сгенерировать тег для каждого индекса.

Я использовал JSON .stringify для генерации уникального ключа, так как использование индекса для ключа является плохой практикой.

Код ниже показывает один из правильных подходов, использующих реагирование.

        const data = [
      {
        name: "Crock Pot Roast",
        imageURL: "https://via.placeholder.com/150",
        information: [
          {
            date: "24 July 2019",
            type: "Main dish",
            difficulty: "Easy",
            time: "~50"
          }
        ],
        ingredients: [
          {
            quantity: "1",
            name: " beef roast",
            type: "Meat"
          }
        ]
      }
    ];

    const CardRecipe = ({data}) => {
      const { name, imageURL, information, ingredients } = data;
      return (
        <div key={name}>
          <span>{name}</span>
          <div>
            <div>
              <img src={imageURL} alt={name} />
              <div>
                {information &&
                  information.map(info => {
                    const { date, type, difficulty, time } = info;
                    return (
                      <ul key={JSON.stringify(info)}>
                        <li> {date} </li>
                        <li> {type} </li>
                        <li> {difficulty} </li>
                        <li> {time} </li>
                      </ul>
                    );
                  })}
              </div>
              <div>
                {ingredients &&
                  ingredients.map(ingredient => {
                    const { quantity, name, type } = ingredient;
                    return (
                      <ul key={JSON.stringify(ingredient)}>
                        <li> {quantity} </li>
                        <li> {name} </li>
                        <li> {type} </li>
                      </ul>
                    );
                  })}
              </div>
            </div>
          </div>

          <div>food ingredients</div>

          <div>food recipe</div>
        </div>
      );
    };

    export default function App() {
      const first_reciepe = data[0];
      return (
        <div className="App">
          <CardRecipe data={first_reciepe} />
        </div>
      );
    }

В качестве альтернативы, вы можете распечатать любые списки, отобразив один раз на массив, а затем на каждый объект / ключ, чтобы сгенерировать (x) количество <"li "> tags.

Пример:

const DoList = ({ data }) => {
  return data.map(list => {
    return (
      <ul key={list}>
        {Object.keys(list).map(key => {
          const value = list[key];
          return <li key={key}> {value} </li>;
        })}
      </ul>
    );
  });
};

Тогда вы будете использовать его столько раз, сколько захотите:

<DoList data={ingredients} />
<DoList data={information} />
<DoList data={...} />