如何在反应中迭代JSON对象中的多个数组

Question

我想要做的是显示两个模块，但我收到“mod”未定义的类型错误。这里有一些关于我如何传递所有内容的信息。我还注意到的另一件事是，当我将模块和 mod 都传递给组件时，模块将在没有 mod 时定义。如果我切换 mod 和模块，那么 mod 将被定义而不是模块？不知道为什么会这样。

这是我的 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

如果您需要任何解释，或者这不是您要问的，请评论我的回答

简答：

确保在数组中始终使用相同名称的键（mod 或模块）使用其中的 1 个（比如说模块）

然后转到每个组件并从中删除 mod（即使它在道具或渲染中）

长答案：

好的，所以你遇到的问题是传递 undefined 1）你得到了这个数组并将它存储在状态（App组件）中

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 的 props）并从中获取每个元素的（mod、modules）到 Component2，例如：

itemList[0] 有模块但没有模块（未定义）

itemList[1] 有 mod 但没有模块（未定义）

4) 你将它们（模组、模块）从 Component2 传递到 Component3（别忘了我们有未定义的）

5) 在 Component3 中，您使用 map 迭代 (mod、modules)，就像您说的那样
undefined.map(.....) 这就是你得到错误的原因