Почему мой компонент не выполняет повторную визуализацию JSX при обновлении состояния? (Крючки) - PullRequest
Новая
       31

Почему мой компонент не выполняет повторную визуализацию JSX при обновлении состояния? (Крючки)

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

Я преобразовал свой компонент для использования хуков, но когда состояние установлено, мои чекбоксы не перерисовываются. 

import React, { useEffect, useState } from 'react';
import './Sorting.scss'

let fake = [
  {type: 'A'},
  {type: 'A'},
  {type: 'A'},
  {type: 'A'},
  {type: 'A'},
  {type: 'B'},
  {type: 'B'},
  {type: 'B'},
  {type: 'C'},
  {type: 'C'},
  {type: 'C'},
]

export default function Sorting() {
  const [manageableData, setManageableData] = useState([]);

  useEffect(() => {
    let uniqueTypes = fake.map(item => item.type).filter((value, index, self) => self.indexOf(value) === index);
    let manageableData = [];
    uniqueTypes.forEach(item => {
      manageableData.push({ 'type' : item, 'checked': false });
    });
    setManageableData(manageableData)
  }, []);


  const handleChange = (e, index) => {
    let md = manageableData;
    md[index].checked = e.target.checked;
    setManageableData(md)
  }

  const handleFiltering = () => {
    let filtered = [];
    manageableData.forEach(type => {
      if(type.checked){
        filtered.push(fake.filter(item => item.type === type.type));
      }
    });

    console.log('Filtered Data: ', filtered.flat(filtered.length));
  }

  return (
    <div className="checkbox-group stacked">
      {manageableData.map((item, index) => (
        <div className="checkbox-item" key={`${index}-checkbox-item`}>           
          <input 
            id={`${index}-checkbox`} 
            type="checkbox" 
            className="checkbox"              
            checked={item.checked} 
            onChange={(e) => handleChange(e, index, manageableData)}
          />
          <label htmlFor={`${index}-checkbox`}>{item.type}</label>                          
        </div>
      ))}

      <div className="row">
        <input 
          type="button" 
          onClick={handleFiltering} 
          className="btn-primary" 
          value="Filter"
        />
      </div>  

    </div>
  )
}

Я перестраиваю чекбоксы на основе manageableData в состоянии - также для управления, какие из нихпроверены. Но после того, как вы отметите один из них, обновите состояние, но флажки не будут повторно отображаться с обновленным состоянием.

...