当我在控制台日志中选中或取消选中我的复选框时，无法看到我的数据内容答案

【问题标题】：Not able to see the content of my data when I check or uncheck my checkbox in the console log当我在控制台日志中选中或取消选中我的复选框时，无法看到我的数据内容
【发布时间】：2022-07-13 00:08:08
【问题描述】：

我不明白为什么当我选中 (availability:1) 或取消选中 (availability:0) 复选框时，我没有此信息：availability:1（例如），我只得到 availability: （空），当我通过控制台查看发送的数据内容时（而我可以在控制台日志中看到status 的内容）。

export default function Display() {
  const { menuId } = useParams();
  const [forms, setForms] = useState();
  const [status, setStatus] = useState("");

  useEffect(() => {
    axios.post("", menuId:parseInt(menuId))
      .then((res) => {
        console.log(res);
        setForms(res.data.forms[0]);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [menuId]);

 
  const [data, setData] = useState({
    availability: "",
    status:""
  });

  function submit(e) {
    e.preventDefault();
    axios.post(data.availability, data.status).then((res) => {
      console.log(res.data);
    });
  }

  return (
    <Card className="h-full">
      <div className="p-4 flex items-center justify-between">       
          <div>
            <button
              type="button"
              onClick={() => setStatus({ status: "save" })}
            >
              Save
            </button>
          </div>
          <div>
            <button
              type="button"
              primary
              onClick={() => setStatus({ status: "not saved" })}
            >
              Not saved
            </button>
          </div>
      </div>
      <hr />
      <form onSubmit={(e) => submit(e)}>
        <span>
          Availability : <Checkbox value={!!forms.types.availability} />
        </span>
      </form>
    </Card>
  );
}

复选框：

export default function Checkbox({ v }) {
    const [checked, setChecked] = useState(v);
    return (
        <label>
            <input
                type="checkbox"
                checked={checked}
                onChange={(e) => setChecked(checked => !checked)}                   
            />
            {v}
        </label>
    );
}

你明白为什么吗？

我的 json 来自 api 的 menuId:1:

{
  "forms": [
    {
      "menuId": 1,
      
          "_id": "123ml66",
          "name": "Pea Soup",
          "description": "Creamy pea soup topped with melted cheese and sourdough croutons.",
          "types": [
            {
              "availability": 1,
            }
          ],
          ...    
    },
    ...
  }

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

更新子组件中的checked 状态不会自动更新父组件中的forms 状态，因为它们彼此不相关。

因为const [checked, setChecked] = useState(v); 只从父组件读取作为v 传入的initialState。然后后续的状态更改存储在checked 中，而来自父级的forms 状态将不会意识到它。这就是可用性的价值永远不会更新的原因。

相反，您可以将 state 和 setter 函数都传递给子组件：

export default function Display() {
  const [forms, setForms] = useState();

  return (
    ...
    Availability : <Checkbox value={!!forms.types.availability} setForms={setForms} /> // pass in setter as well
    ...
  )
}

export default function Checkbox({ value, setForms }) {
    return (
        <label>
            <input
                type="checkbox"
                checked={value}
                onChange={(e) => setForms(...)} // your update logic                    
            />
            {value}
        </label>
    );
}

【讨论】：