React useState 不保存/存储来自 API/SDK 数据的值

Question

这可能是一个多余的问题....我能够使用 useState 存储一个对象并呈现这样的值，但是在一些“空闲”时间之后，状态消失了。我正在从 SDK（名字、姓氏...）中获取数据，我可以将此信息用作表单中的占位符。

为了我的使用，我创建了一个原始的多步骤动态表单，位于同一个组件上，用户将在继续下一步之前一次回答 1 个问题。最后一步呈现所有用户的信息，这些信息有时会显示，有时会引发错误 user.firstName 未定义可能是由于用户回答问题“空闲”时间所花费的时间..

import { User } from 'randomSDK';

const FormComponent = () => {
 let [user, setUser] = useState({});

 useEffect(() => {
  async fetchData(){
   let _user = await User.getUserInfo();
// Result user ={firstName: 'john', lastName: 'doe'}
   setUser(_user)
  }
fetchData()
 ), []}

 return (
  <form>
    <input placeholder={user.firstName} type='text' />
  // sometimes user.firstName shows
  // other times- TypeError: Cannot read property 'firstName' of undefined

  // etc....
  </form>
 )
}

export default FormComponent;

我应该通过在渲染上丢失这些数据来创建某种 redux 吗？？？

也许我应该设置一个测试用例，假设在 user.firstName 的放置中没有这样的数据..

我尝试了以下方法，但仍然遇到同样的错误：

<input placeholder={user.firstName || ''} />
<input placeholder={!user.firstName ? '' : user.firstName} />

我确定这是一个非常非常简单的解决方法，我只是让它变得太复杂了..

Answer 1

这可能是因为您的 useEffect 运行了多次。

 useEffect(() => {
  async fetchData(){
   let _user = await User.getUserInfo();
// Result user ={firstName: 'john', lastName: 'doe'}
   setUser(_user)
  }
  fetchData();
 ), []} //add dependancy array //

请看看这是否有效。