Может кто-нибудь объяснить, почему этот компонент реакции не выводит изображения или правильный ключ? - PullRequest
Новая
       106

Может кто-нибудь объяснить, почему этот компонент реакции не выводит изображения или правильный ключ?

0 голосов
/ 13 марта 2020

Изображения PNG локально сохраняются на моем компьютере и импортируются в этот компонент React. Они не загружаются на странице. Я также получаю ключевую ошибку. Основное решение работало, когда я вытягивал из обычного Rest API. Он перестал работать, когда я попытался сослаться на свой собственный массив. Изображение sr c показывает «[Object Object]» вместо источника изображения, как я и ожидал. 

import React from 'react';
import basketball from '../img/basketball.png';
import bike from '../img/bike.png';
import boxing from '../img/boxing.png';

function ExerciseIcons() {
  return (
    [
      {
        name: "bike",
        id: "1",
        image: <img src={bike} />
      },
      {
        name: "basketball",
        id: "2",
        image: {basketball}
      },
      {
        name: "boxing",
        id: "3",
        image: {boxing}
      },
    ].map(item => (
      <ul>
        <li key={item.id}> <img src={item.image} /></li>
      </ul>
    ))
  )
}

export default ExerciseIcons;

Вот как выглядит вывод

1 Ответ

0 голосов
/ 13 марта 2020

У вашего массива есть некоторые проблемы. basketball и boxing имеют {} вокруг них, что является синтаксисом объекта. Таким образом, значение клавиши image на самом деле что-то вроде { basketball: basketball }. Вот почему отображается «[Object Object]». bike является полным элементом JSX, а не источником изображения.

Вам необходимо изменить его на следующее: 

[
  {
    name: "bike",
    id: "1",
    image: bike
  },
  {
    name: "basketball",
    id: "2",
    image: basketball
  },
  {
    name: "boxing",
    id: "3",
    image: boxing
 },
]

Помните: {} внутри JSX есть синтаксис для оценки JavaScript выражений. За пределами JSX это обозначение объекта.

Проблема с key заключается в том, что вы предоставляете его не тому элементу. Ключ должен быть предоставлен элементу root внутри функции отображения. В данном случае это ul (хотя мне интересно, действительно ли это то, что вы хотите, он создаст новый список для каждого элемента).

...