如何在功能组件的for循环中将数据放入自定义状态

Question

我从API中得到数据如下：


[
  {
    "GroupA1": [
      {
        "code": 10,
        "name": "item1"
      },
      {
        "code": 11,
         "name": "item2"
      },
      {
        "code": 12,
         "name": "item3"
      },
      {
        "code": 13,
         "name": "item4"
      }
    ],
    "GroupA2": [
      {
        "code": 21,
         "name": "item5"
      },
      {
        "code": 20,
         "name": "item6"
      },
      {
        "code": 22,
        "name": "item7"
      },
      {
        "code": 23,
        "name": "item8"
      }
    ]
  },
  {
    "GroupB": [
      {
        "code": 70,
        "name": "item9"
      }
    ]
  },
  {
    "GroupC": [
      {
        "code": 50,
        "name": "item10"
      },
      {
        "code": 51,
       "name": "item11"
      },
      {
        "code": 52,
        "name": "item12"
      }
    ]
  },
  {
    "GroupD": [
      {
        "code": 40,
         "name": "item13"
      }
    ]
  }
]

我正在使用 Redux。

在我的React项目中获取数据并使用for循环并通过console.log()跟踪数据后，数据在浏览器中显示如下：


{GroupA: Array(4)}
  GroupA: Array(4)
   0: {code: value, name: "value"}
   1: {code: value, name: "value"}
   2: {code: value, name: "value"}
   3: {code: value, name: "value"}


{GroupB: Array(1)}
  GroupB: Array(1)
   0: {code: value, name: "value"}


{GroupC: Array(3)}
  GroupC: Array(3)
   0: {code: value, name: "value"}
   1: {code: value, name: "value"}
   2: {code: value, name: "value"}


{GroupD: Array(1)}
  GroupD: Array(1)
   0: {code: value, name: "value"}

我想将数据放在功能组件和具有 <optgroup> 标签和 <option> 标签的 <select> 标签中。

我想把GroupA、GroupB、GroupC、GroupD等数据放在<optgroup>标签里，同时把name和code放在<option>标签里

我的组件如下：


const FunctionalComponent = () => {

const [mystate , setMyState] = useState([
    {
      title: null,
      permission: [{ name: null, code: null }],
    },
  ]);

const datas = useSelector((state) => state.datas);

const dispatch = useDispatch();


useEffect(() => {
  dispatch(getDatas());


 for (var stuff in datas) {
    
      console.log( datas[stuff] );

     setMyState((t) => [...t, {title: [key]}]); //???

        value.map((v) =>
          setMyState((val) => [...val, { permission: [{ name: v.name }] ,[{ code: v.code }] }]) //???
        );
       
  }


}


return(

<div>

<select>
 <optgroup>  //show title
  <option></option>  //show name , code
 </optgroup>

</select>

</div>


)


}

export default FunctionalComponent

我无法显示数据，它们在 select 标签中未被识别为单独的 objects。

当我在 useEffect 和循环 for 中获取数据时，如何在状态中传递数据，以便将 key 放在标题中。而包含代码和名称的 value 也被放置而不是状态代码和名称？

如何在 JSX 中访问状态的标题、名称和代码？

因为我用的方式不行，数据没有传到状态

感谢那些帮助过我的人！

Answer 1

勾选this sandbox

  <select>
    {data.flatMap(obj => Object.entries(obj)).map(objArr => {
      return (
      <optgroup label={objArr[0]}>
        {objArr[1].map(ob => <option value={ob.code}>{ob.name}</option>)}
      </optgroup>
      )
    })}
  </select>

它的作用是使用 flatMap 将所有对象展平为 1 个数组，然后您可以轻松地迭代此数组。

每个条目都是一个新数组。第一个元素将是“属性”、optgroup，第二个元素将填充 option 标签。

如何在功能组件的for循环中将数据放入自定义状态

How to put data inside a customize state in for loop in functional component

javascript

arrays

reactjs

react-hooks