关于react-hook的一个问题，求助

Question

下面的代码，我想达到的目的是，第一次渲染时，对list中所有选中的checked发起请求，后续点击input时，只对当前修改为true的item发起请求，怎么写好呢？

function Demo() {
  const [list, setList] = React.useState([
    { key: "car", name: "车辆", checked: true },
    { key: "camera", name: "摄像头", checked: true },
  ]);
  
  React.useEffect(() => {
    list.forEach(item => loadDataByKey(item.key))
  }, [list])
  
  const loadDataByKey = (key) => {
    // 发起请求
  }
  
  const handleRadioChange = (key) => {
    const nextList = list.map(item => {
        if (item.key === key) {
            return {
                ...item,
                checked: !item.checked
            }
        }
        return {...item}
    })
    
    setList(nextList)
  }
  
  return (<ul>
        {list.map(({ key, name, checked }) => (
          <li key={key}>
            <label>
              <span>{name}</span>
              <input
                ref={inputRef}
                type="checkbox"
                checked={checked}
                onChange={() => handleRadioChange(key)}
              />
            </label>
          </li>
        ))}
      </ul>)
}

Answer 1

在 loadDataByKey 中循环 list ，当 checked 为 true 时，传递该项的 key 或 name 调用该项的接口。当点击 input 后，调用 setList 再调用 loadDataByKey。

你可以发现，当数据量较小时，较好的做法是：组件初始化时调用全部数据，在本地根据是否 checked 控制需要展示的数据。

当数据较大时，较好的做法是：组件初始化时调用 checked 为 true 的项的数据，选中时，和已经请求的过数据比对，再去请求接口。