状态变量返回未定义

Question

我需要帮助来管理反应状态，但我似乎无法理解它。

我有一个组件，它通过 useLocation 从另一个页面接收数据库条目的 id，然后我使用该 id 和 axios get 请求将其余数据拉入数组中。但是，当我尝试使用 get 请求中的数据作为 MUI TextField 的默认值时，它不会自然地呈现数据，页面加载后状态将返回为未定义。我必须将 TextField 的键设置为获取请求数据（我在网络中找到的解决方法）才能呈现。然后，当我尝试提交表单时，尽管 Texfield 包含来自 get 请求的数据，但 Textfield 中的值显示为未定义。

const location = useLocation();
const [info, setInfo] = useState([]);

useEffect(()=>{
  axios
    .get("//localhost:3001/Info/" + location.state.id)
    .then((response)=>{
      setInfo(response.data);
  })
});

const validationSchema = Yup.object().shape({});

const formik = useFormik({
  initialValues: {
    name: info.name
  },
  validationSchema: validationSchema,
  onSubmit: (values) => {
    console.log(values) // displays {name: undefined, .....}
  }
});

return(
  <>
    <Container>
      <form onSubmit = {formik.handeSubmit}>
        <TextField
          id = "name"
          label = "Name"
          name = "name"
          onChange = {formik.handleChange}
          onBlur = {formik.handleBlur}
          key = {info.name} //Textfield blank without setting key
          defaultValue = {info.name}
        />
        <Button type = "Submit"> Submit </Button>
      </form>
    </Container>
  </>
);

我希望 TextFields 默认值能够正确呈现，而无需声明键作为解决方法。另外，我希望文本字段的值包含提交时 formik 声明中的初始值。

Answer 1

您的代码中存在一些问题，请执行以下修复：

1. useEffect 的调用没有依赖关系

按如下方式更新您的 useEffect，以便仅在初始安装时触发：

useEffect(()=>{
  axios
    .get("//localhost:3001/Info/" + location.state.id)
    .then((response)=>{
      setInfo(response.data);
  })
}, []);

2. 您正在尝试访问

   info.name

   内的

   TextField

   ，但您在这里将其初始化为数组：

   const [info, setInfo] = useState([]); 您无法使用

   .

   访问数组。您可以根据 API 返回的内容更改此设置。如果它返回一个包含 1 项的数组（我根据问题的详细信息假设），您可以将其解构为：

    <TextField
    id = "name"
    label = "Name"
    name = "name"
    onChange = {formik.handleChange}
    onBlur = {formik.handleBlur}
    key = {info[0].name} //Textfield blank without setting key
    defaultValue = {info[0].name}
    />
   

3. 渲染前检查数据是否存在：

   if(!info.length){
     return <div>Loading</div>
   }
   
   return(
     <>
       <Container>
         <form onSubmit = {formik.handeSubmit}>
           <TextField
             id = "name"
          label = "Name"
          name = "name"
          onChange = {formik.handleChange}
          onBlur = {formik.handleBlur}
          key = {info[0].name} //Textfield blank without setting key
          defaultValue = {info[0].name}
        />
        <Button type = "Submit"> Submit </Button>
      </form>
    </Container>
    </>
    );