为什么当 state 更新时我的组件没有重新渲染 JSX？ （挂钩）

Question

我已将组件转换为使用钩子，但是当 state 设置时，我的复选框不会重新呈现。

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>
  )
}

我根据 state 中的 manageableData 重建复选框 - 同时管理哪些复选框被选中。 但是在您检查其中一个之后，state 会更新，但复选框不会使用更新的 state 重新呈现。