时间戳

首页 > 解决方案 > 如何在输入表单中设置初始获取的数据

reactjs - 如何在输入表单中设置初始获取的数据

问题描述

您好，我正在获取数据，然后我想在输入表单中将它们显示为初始值，但是即使我在 console.log 中看到数据，我也得到未定义而不是值，因此正确获取这里是我的代码示例简化

也许我应该使用useEffect？因为获取数据有延迟，首先什么都没有，然后当接收到数据时，输入没有刷新？我不知道如何使用它，我的代码在打字稿中

export default function Form() {
 const name = data.name;
 console.log(name); //here I can see name is fetched
 const [company, setCompany] = useState<string>(`name: ${name}`); // name: undefined

  return (
        <form>
          <input
            value={company}
            onChange={(e) => setCompany(e.target.value)}
            label="Company"
          /> 
    ```

标签： reactjstypescriptreact-hooks

解决方案

功能组件以这种方式工作 - 每次渲染都会调用整个函数，这意味着每次渲染 -

const name = data.namose;
console.log(name); 
const [company, setCompany] = useState<string>(`name: ${name}`);

这三行被调用，在第一次运行时它会将 undefined 设置为变量name，它将打印 undefined 然后创建状态company并将其设置为 undefined。下一次运行（或下一次......）当 data.name 未定义时，它将 name 设置为实际数据。React 钩子知道这不是第一次useState调用该函数，因此它不会company再次设置初始状态，这是预期的行为，因此每次渲染您的状态都不会重置为初始状态。

正如您所提到的，我建议您做的是，useEffect如果这符合您的要求，请在组件内获取数据，然后在效果内设置状态，不要向useEffect函数发送依赖项数组，这样它就会起作用就像componentDidMount在类组件中一样，它只会在第一次安装组件时运行一次。

推荐阅读