Контроль подмассива состояния в форме React - PullRequest
Новая
       30

Контроль подмассива состояния в форме React

0 голосов
/ 22 октября 2019

У меня есть контейнер с ящиками (div), и внутри этих ящиков есть N флажков. Ящики и чеки извлекаются с сервера и отображаются на экране. Мне нужно контролировать состояние флажков, чтобы установить проверено в соответствии с другой выборки. Как я могу это сделать?

Редактировать: я сделал выборку, чтобы получить коробку (модули). Каждый модуль имеет массив флажков (которые я называю функциями):

modules = [{ id, name, features: [{ id, value }] } ]

я создал новое состояние 'checkModules' для управления свойством 'checked' из флажка. Когда я делаю fetchModules, я устанавливаю checkModules в соответствии с извлеченными данными. 

const PermissionsPage = () => {

 const [modules, setModules] = useState([]);
 const [checkModules, setCheckModules] = useState([]); //state to control the checkboxes 'checked' propertie

 useEffect(() => {
  api.get('/modules').then(res => {
    setModules(res.data.modules);
    setCheckModules(
     res.data.modules.map(m => ({
       id: m.id,
       features: m.features.map(f => ({ id: f.id, checked: false }))
       }))
     );
  }
 });

 const handleChange = (m,f,e) => {
  let temp = checkModules;
  //the propertie is changed, but the checkbox don't 'check'.
  temp[m].features[f].checked = !temp[m].features[f].checked;
  setCheckModules(temp);
 }

return (){
  <div>
    {modules.map((module, m) => (
      <div>
      <span>{module.name}</span>
      {module.features.map((feature, f) => (<checkbox onChange={() => handleChange(m,f)} checked={checkModules[m] !== undefined ? checkModules[m].features[f].checked : false}/>))}
      </div>
    )}
  </div>
}
}

Я пытался воспроизвести код, упрощая использование компонентов =).

1 Ответ

0 голосов
/ 22 октября 2019

Я решаю это. Я выложу изменения =). 

const PermissionsPage = () => {

 const [modules, setModules] = useState([]);
 const [checkModules, setCheckModules] = useState([]); //state to control the checkboxes 'checked' propertie

 useEffect(() => {
  api.get('/modules').then(res => {
    setModules(res.data.modules);
    setCheckModules(
     res.data.modules.map(m => ({
       id: m.id,
       name: m.name,
       features: m.features.map(f => ({ id: f.id, name: f.name, checked: false }))
       }))
     );
  }
 });

 const handleChange = (m,f,e) => {
  let temp = [...checkModules]; //that's the point. You need to take the state as a new array;
  temp[m].features[f].checked = !temp[m].features[f].checked;
  setCheckModules(temp);
 }

return (){
  <div>
    {checkModules.map((module, m) => (
      <div>
      <span>{module.name}</span>
      {checkModules[m].features.map((feature, f) => (<checkbox onChange={() => handleChange(m,f)} checked={feature.checked}/>))}
      </div>
    )}
  </div>
}
}
...