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

Question

我不明白为什么当我选中（ availability:1 ）或取消选中（ availability:0 ）复选框时，我没有此信息： availability:1 （例如），我只得到availability:对于trust为空相同和comments ），当我控制台日志查看发送的数据内容时（而我可以在控制台日志中看到我的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: "",
    trust:"",
    comments:"",
    status:""
  });

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

  return (
      <div>       
          <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>
  );
}

复选框：

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,
              "trust":0,
              "comments":1
            }
          ],
          ...    
    },
    ...
  }

Answer 1

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

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

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

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

  return (
    <div className="App">
      availability:
      {forms ? (
        <Checkbox
          value={!!forms.types[0].availability}
          setForms={setForms}
          forms={forms}
          param={"availability"}
        />
      ) : (
        "loading"
      )}
    </div>
  )
}

export default function Checkbox({ value, setForms, forms, param }) {
  function processNewForms(forms, param) {
    const newForms = { ...forms }; // make a copy first

    newForms.types[0][param] = newForms.types[0][param] === 0 ? 1 : 0; // toggle logic

    return newForms;
  }

    return (
        <label>
            <input
                type="checkbox"
                checked={value}
                onChange={(e) => setForms(processNewForms(forms, param)}                
            />
            {value}
        </label>
    );
}

请参阅更新的沙盒以进行演示