更新项目数组反应 redux

Question

我有一个带有复选框的项目列表，我需要在“已选中”项目中更新 redux 中的状态。

在这种情况下，“选中”时为真，未选中时为假。

我的减速器代码：

const initialState = {
esportes: [
{
  externos: [
    {
      label: 'Futebol de campo',
      checked: false,
      name: 'futebolcampo',
    },
    {
      label: 'Vôlei de areia',
      checked: false,
      name: 'voleiareai',
    },
  ],
},
{
  internos: [
    {
      label: 'Vôlei de quadra',
      checked: false,
      name: 'voleiquadra',
    },
    {
      label: 'Futebol de salão',
      checked: false,
      name: 'futebosalao',
    },
  ],
},
],
};

const EsportesReducer = (state = initialState, action) => {
switch (action.type) {
  case 'UPDATE_ESPORTES':
    return {};
  default:
    return state;
}
};

export default EsportesReducer;

我的返回页面：

import React from 'react';
import {
Grid,
Paper,
Typography,
FormControlLabel,
Checkbox,
} from '@material-ui/core';
import { useSelector, useDispatch } from 'react-redux';
import { Area } from './styled';

const Esportes = () => {
const dispatch = useDispatch();

const esportes = useSelector(state => state.EsportesReducer.esportes);

const handleChangeCheckbox = event => {
const { checked } = event.target;
const { name } = event.target;
const id = parseInt(event.target.id);

dispatch({
  type: 'UPDATE_ESPORTES',
  payload: checked,
  name,
  id,
});
};

return (
<Area>
  {console.log(esportes)}
  <Paper variant="outlined" className="paper">
    <Grid container direction="row" justify="center" alignItems="center">
      <Typography>Esportes externos</Typography>
      {esportes[0].externos.map((i, k) => (
        <FormControlLabel
          control={
            <Checkbox
              checked={i.checked}
              onChange={handleChangeCheckbox}
              name={i.name}
              id="0"
              color="primary"
            />
          }
          label={i.label}
        />
      ))}
      <Typography>Esportes internos</Typography>
      {esportes[1].internos.map((i, k) => (
        <FormControlLabel
          control={
            <Checkbox
              checked={i.checked}
              onChange={handleChangeCheckbox}
              name={i.name}
              id="1"
              color="primary"
            />
          }
          label={i.label}
        />
      ))}
    </Grid>
  </Paper>
</Area>
);
};

export default Esportes;

我知道这里：

const EsportesReducer = (state = initialState, action) => {
switch (action.type) {
  case 'UPDATE_ESPORTES':
    return {};
  default:
    return state;
}
};

返回时，我需要制作地图以仅获取我想要更新的项目。我尝试了几种方法，但都做不到。

Answer 1

您需要在action.payload中通过id找到该项目。

const EsportesReducer = (state = initialState, action) => {
   switch (action.type) {
     case 'UPDATE_ESPORTES':
       var chosen = state.esportes.find(esporte => esporte.id === action.payload.id)
       return {chosen};
     default:
       return state;
   }
};