Как инициализировать пустой массив и передать его в props?

Question

[embiid]

Я новичок в ReactJS. Я создаю приложение, которое берет из файла данных JSON и хранится в public папке.

class App extends React.Component {
  componentDidMount() {
    axios.get('http://localhost:3000/pizza.json').then(data => {
      store.dispatch(setPizza(data.Pizza))
    })
  }

  <Route path="/"     render    = { () => <Main items={ this.props.items }/>} exact></Route>

Также есть маршрутизация, где на главной странице я хотел отобразить компоненты. Итак, у меня есть элемент Item:

function Item({ image, name, types, sizes, price }) {
  const availableTypes = ['0', '1'];
  const availableSizes = [26, 30, 40];

  const [activeType, setActiveType] = useState(types[0])
  const [activeSize, setActiveSize] = useState(sizes[0])

  const onSelectType = index => {
    setActiveType(index)
  }

  const onSelectSize = index => {
    setActiveSize(index)
  }

  return (
    <div className="item">
      <img src={ image } alt="pizza1" className="item-preview"/>
      <h3 className="item-name">{ name }</h3>
      <div className="item-dimantion">
        <ul className="list">
        {
          availableTypes.map((type, index) => (
          <li
            key={type}
            className={classNames({
              choice: true,
              active: activeType === index ? 'active' : '',
              disable: types.includes(index)
            })}
            onClick={() => onSelectType(index)}>
            { type }
          </li>
        ))}
        </ul>

        <ul className="list">
          {
            availableSizes.map((size, index) => (
              <li key={ size }
                  className={classNames({
                    choice: true,
                    active: activeSize === index ? 'active' : '',
                    disable: sizes.includes(index)
                  })}
                  onClick={() => onSelectSize(index)}>
                  { size } см.
              </li>
            ))
          }
        </ul>
      </div>

      <div className="more">
        <h4 className="price">от { price }</h4>
        <button className="add">Добавить</button>
      </div>
    </div>
  )
}

Потом я вызываю Item компонент в Main

function Main({ items }) {
...
 <div className="main__content__items">
     {
        items.map(obj => {
           return (
              <Item key={obj}></Item>
           )
        })
      }
 </div>

И тут мне вызывает ошибку: (TypeError: Cannot read property 'map' of undefined)

Решил, я потом в Main прописать items = []. Проблему-то я решил, но когда проверяю console.log(Array.isArray(this.props.items)) то мне выводит false. Как мне передать массив в пропс?

Answer 1

[TRNER]

componentDidMount вызывается после того как смонтируется компонент со всеми его дочерними элементами (следовательно, когда мы пытаемся использовать props.items, запрос к json еще даже не будет отправлен).

Можно присвоить пустой массив для items в initialState, чтобы избавиться от этой ошибки, либо же добавить вспомогательное состояние, которое бы проверяло, загружены ли у нас данные, и если да, то выводить их.

Answer 2

[Павел Диденко]

Почему нельзя взять и просто на странице Main вызвать этот запрос в componentDidMount? Что за извращение, вызывать его в App и передавать пропсом в роут?