reactjs 我无法正确使用我的状态,它显示未定义

axr492tv  于 2023-01-04  发布在  React
关注(0)|答案(2)|浏览(115)

This is the error im getting这里显示了变量未定义的错误,我该如何解决这个问题?有什么方法可以使用吗?

const [indication, setindication] = React.useState({
    venous: "",
    flutter: "",
    heartValve: "",
    peripheral: "",
    antibody: "",
    other: "",
  });

  const handleChange = (event) => {
    const { name: key, value } = event.target;
    if (key === venous) setindication({ ...indication, venous: value });
    else if (key === flutter) setindication({ ...indication, flutter: value });
    else if (key === heartValve)
      setindication({ ...indication, heartValve: value });
    else if (key === peripheral)
      setindication({ ...indication, peripheral: value });
    else if (key === antibody)
      setindication({ ...indication, antibody: value });
    else if (key === other) setindication({ ...indication, other: value });
    else setindication({ ...indication, [key]:"" });
  };

在这里,这是我使用的条件类型,我想在我的复选框中应用它,如果有人能帮助我,这个问题将非常有帮助。

<FormGroup>
                <FormControlLabel
                  value={indication.venous}
                  name="venous"
                  onChange={handleChange}
                  control={
                    <Checkbox  />
                  }
                  label={
                    <Typography fontSize={20}>
                      Venous Thromboembolism (VTE)
                    </Typography>
                  }
                  labelPlacement="start"
                />
              </FormGroup>
7gcisfzg

7gcisfzg1#

    • 更新**

我仍然不确定是否完全理解了所需的结果,但如果首选的indication状态是一个选定值的数组,如["venous"]["venous", "other"]等,下面是一个可能的示例。
简化的现场演示:stackblitz
将状态定义为[]数组,并修改事件处理程序以填充数组:

const [indication, setindication] = React.useState([]);

const handleChange = (event) =>
  setindication((prev) =>
    prev.includes(event.target.name)
      ? prev.filter((item) => item !== event.target.name)
      : [...prev, event.target.name]
  );

因为indication现在是一个仅用于选定值的数组,所以选项的数据需要保存在另一个const中,或者它可以来自props:

const optionsData = {
  venous: "",
  flutter: "",
  heartValve: "",
  peripheral: "",
  antibody: "",
  other: "",
};
    • 原件**

由于FormControlLabelvalueindication.venous绑定,因此无论是否检查Checkbox,它似乎总是""空字符串。
假设这个组件看起来像Checkbox,那么预期的结果可能是保存选中的选项(truefalse)?
如果是这样,事件处理程序可能会将event.target.checked设置为新值,例如:

const handleChange = (event) =>
  setindication((prev) => ({
    ...prev,
    [event.target.name]: event.target.checked,
  }));

一个快速演示有望帮助您了解:stackblitz

gpfsuwkq

gpfsuwkq2#

变量key看起来应该是字符串。尝试以下操作:

const handleChange = (event) => {
    const { name: key, value } = event.target;
    if (key === "venous") setindication({ ...indication, venous: value });
    else if (key === "flutter") setindication({ ...indication, flutter: value });
    else if (key === "heartValve")
      setindication({ ...indication, heartValve: value });
    else if (key === "peripheral")
      setindication({ ...indication, peripheral: value });
    else if (key === "antibody")
      setindication({ ...indication, antibody: value });
    else if (key === "other") setindication({ ...indication, other: value });
    else setindication({ ...indication, [key]:"" });
  };

相关问题