Как перебрать несколько массивов в JSON объекте в реакции

Question

Я пытаюсь отобразить оба модуля, но получаю ошибку типа "mod" undefined. Вот немногие о том, как я передаю все. Еще кое-что, что я заметил, также было, когда я передал оба модуля, и мод в модули компонентов будет определен, когда мод не будет. Если я переключу мод и модули, то мод будет определен, а не модули? Не уверен, почему это происходит.

Вот мой JSON:

enter code here[
{
    "title": "Favorite Sports",
    "itemList": [
        {
            "key": "Her sports",
            "modules": [
                {"label": "BaseBall", "value": "checked"},
                {"label": "Volleyball"}

            ]
        },
        {
            "key": "His sports",
            "mod": [
                {"label": "Soccer"},
                {"label": "Football"}
            ]
        }
    ]
}

]

Вот идея, как я использую свои компоненты:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { render } from '@testing-library/react';
import SystemListData from '../src/data.json'
import Component1 from './Component1';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        systemList: []
    }
}

componentDidMount() {
  const systemList = SystemListData;
  this.setState({
    systemList
  })
}
  render() {
    const { systemList } = this.state;
    return (
      <div className="App">
        {systemList.map((system, index) => {
          return <div key={index}><Component1 itemList={system.itemList} /></div>
        })}
      </div>
    )
  }
  
}

export default App;

Далее:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react'
import Component2 from './Component2'

const Component1 = ({itemList}) => {
    return (
        <div>
            {itemList.map((item, index) => {
                return <Component2 key={index} header={item.key} modules={item.modules} mod={item.mod} />
            })}
        </div>
    )
}

export default Component1

import React from 'react'
import Component3 from './Component3'

const Component2 = ({ header, modules, mod }) => {
    return (
        <div>
            {header}
            <Component3 modules={modules} mod={mod} />
        </div>
    )
}

export default Component2

import React from 'react'

const Component3
 = ({ modules, mod }) => {
    return (
        <div>
            {modules.map((module, index) => {
                return <div key={index} className=""><input type="checkbox" defaultChecked={module.value} /><label className="ml-2">{module.label}</label></div>
            })}
            {mod.map((module, index) => {
                return <div key={index} className=""><input type="checkbox" /><label className="ml-2">{module.label}</label></div>
            })}
        </div>
    )
}

export default Component3

В настоящее время застряли какие-нибудь идеи? Спасибо!

Answer 1

Если вам нужно какое-либо объяснение, или это не то, о чем вы спрашиваете, пожалуйста, прокомментируйте мой ответ

Краткий ответ:

в массиве обязательно всегда одно и то же имя ключа (мод или модули), используйте 1 из них (скажем, модули)

, затем go для каждого компонента и удаляйте мод из него (даже если он находится в подпорках) или рендер)

Длинный ответ:

ОК, так что проблема, которую вы имеете, передается неопределенной 1) вы получили этот массив и сохранили его в состоянии (компонент приложения)

this.state={
  itemList : [
    {
      key: 'Her sports',
      modules: [{ label: 'BaseBall', value: 'checked' }, { label: 'Volleyball' }]
    },
    {
      key: 'His sports',
      mod: [{ label: 'Soccer' }, { label: 'Football' }]
    }
  ]
}

2) вы передаете этот массив (Component1)

Component1.props.itemList

ДО СЕЙЧАС ВСЕ ХОРОШО, НО ЗАДАЧА НАЧИНАЕТСЯ С ЗДЕСЬ

3) вы перебираете itemList (из реквизитов Component1) и берете из него (mod, modules) для каждого элемента в Component2, например:

itemList [0] имеет модули, но не имеет mod (не определено)

itemList [1] имеет мод, но не имеет модулей (не определено)

4) Вы передаете их (мод, модули) из Компонента 2 в Компонент 3 (не забывайте, что мы не определили)

5) в Компоненте 3, вы перебираете (мод, модули), используя карту, так что вы говорите как
undefined. карта (.....) и поэтому вы получаете ошибку