无法从子状态正确初始化父组件中的状态

Question

我有两个React组件，即Form和SimpleCheckboxSimpleCheckbox使用了一些重要的UI组件，但我相信它们与我的问题无关。

在表单中，使用effect调用api.getCategoryNames（），该函数解析为一个类别数组，例如，[“信息”、“调查”、“交易”、“痛苦”]。

我的目标是访问父组件（表单）中复选框的状态（选中或未选中）。我采取了这个问题中建议的方法。（见验证答案）

有趣的是，当我记录检查时，它给出了（api调用解析后）：

{Pain: false}

我所期望的是：

{
  Information: false,
  Investigation: false,
  Transaction: false,
  Pain: false,
}

此外，当我单击复选框时，会正确检查状态更新。例如，假设我已经选中了Information和调查框，check变为以下内容：

{
  Pain: false,
  Information: true,
  Investigation: true,
}

这里是组件：

const Form = () => {
  const [checks, setChecks] = useState({});
  const [categories, setCategories] = useState([]);

  const handleCheckChange = (isChecked, category) => {
    setChecks({ ...checks, [category]: isChecked });
  }

  useEffect(() => {
    api
      .getCategoryNames()
      .then((_categories) => {
        setCategories(_categories);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    {categories.map(category => {
       <SimpleCheckbox 
         label={category}
         onCheck={handleCheckChange}
         key={category}
         id={category}
       />
    }
  )
}

const SimpleCheckbox = ({ onCheck, label, id }) => {
  const [check, setCheck] = useState(false);

  const handleChange = (event) => {
    setCheck(event.target.checked);
  };

  useEffect(() => {
    onCheck(check, id);
  }, [check]);

  return (
    <FormControl>
      <FormControlLabel
        control={
          <Checkbox checked={check} onChange={handleChange} color="primary" />
        }
        label={label}
      />
    </FormControl>
  );
}




Answer 1

我缺少的是在setChecks中使用功能更新。钩子API参考说：如果使用以前的状态计算新状态，您可以将函数传递给setState。

所以改变后：

const handleCheckChange = (isChecked, category) => {
    setChecks({ ...checks, [category]: isChecked });
  }

到

const handleCheckChange = (isChecked, category) => {
    setChecks(prevChecks => { ...prevChecks, [category]: isChecked });
  }

它已经开始像我预期的那样工作了。

Answer 2

看起来您需要两次控制状态，分别在表单级别和复选框组件级别。

我消除了其中一个状态并更改了处理程序。此外，我将检查设置为具有initialState，这样您就不会得到非受控到受控输入警告

import React, { useState, useEffect } from "react";
import { FormControl, FormControlLabel, Checkbox } from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Form />
    </div>
  );
}

const Form = () => {
  const [checks, setChecks] = useState({
    Information: false,
    Investigation: false,
    Transaction: false,
    Pain: false
  });
  const [categories, setCategories] = useState([]);
  console.log("checks", checks);
  console.log("categories", categories);
  const handleCheckChange = (isChecked, category) => {
    setChecks({ ...checks, [category]: isChecked });
  };

  useEffect(() => {
    // api
    //   .getCategoryNames()
    //   .then(_categories => {
    //     setCategories(_categories);
    //   })
    //   .catch(error => {
    //     console.log(error);
    //   });
    setCategories(["Information", "Investigation", "Transaction", "Pain"]);
   
  }, []);

  return (
    <>
      {categories.map(category => (
        <SimpleCheckbox
          label={category}
          onCheck={handleCheckChange}
          key={category}
          id={category}
          check={checks[category]}
        />
      ))}
    </>
  );
};

const SimpleCheckbox = ({ onCheck, label, check }) => {
  return (
    <FormControl>
      <FormControlLabel
        control={
          <Checkbox
            checked={check}
            onChange={() => onCheck(!check, label)}
            color="primary"
          />
        }
        label={label}
      />
    </FormControl>
  );
};

如果希望api动态提供检查，可以编写一个fetchHandler，等待api的结果并更新两个状态片

  const fetchChecks = async () => {
    let categoriesFromAPI = ["Information", "Investigation", "Transaction", "Pain"] // api result needs await
    setCategories(categoriesFromAPI);
    let initialChecks = categoriesFromAPI.reduce((acc, cur) => {
      acc[cur] = false
      return acc
    }, {})
    setChecks(initialChecks)
   
  }
  useEffect(() => {
    fetchChecks()
  }, []);

我硬编码了categoriesFromApi变量，请确保在api调用语句前面添加wait。

let categoriesFromApi = await axios.get(url)

最后，将状态的初始切片设置为空对象

const [checks, setChecks] = useState({});