从异步存储中获取并将其设置为 INITIAL_STATE 返回 null

Question

我目前正在从 react-native 中的异步存储中获取数据。我正在获取数据并能够在我的组件中进一步显示它，例如配置文件图像等，但我也试图将我的 formData 的 INITIAL_STATE 设置为等于我从异步存储中提取的值。我相信当我这样做时，这些值的获取速度不够快；因此，我得到了空值。关于如何实现这一点的任何建议都将非常有帮助。我试图等待用户不为空，以便我可以使用获取的数据作为我的初始表单值。我的代码如下：

  const [user, setUser] = useState(null)
  
const INITIAL_STATE = {
    email: user.email //When I set my initial state to the user data; however it is null
  }
const [detailsToUpdate, setDetailsToUpdate] = useState(INITIAL_STATE)

  useEffect(() => {
    console.log('im running')
    handleGetUserDetails()
  }, [])

  const handleGetUserDetails = async () => {
    const details = await AsyncStorage.getItem('userDetails')
    const parsedDetails = JSON.parse(details)
    await setUser(parsedDetails)
    console.log(user) //This comes back as the user data I want to set as my INITIAL_STATE
  }

这是我输入的初始表单值的示例：

 <Input
                value={detailsToUpdate.email}
                autoCapitalize='none'
                autoComplete={false}
                onChangeText={value => {
                  setDetailsToUpdate({ ...detailsToUpdate, email: value })
                }}
              />

Answer 1

添加另一个钩子来检查 user.email 中的变化，这样当它确实发生变化时，您可以更新您的状态

useEffect(() => {
    setDetailsToUpdate({
        email : user.email
    })
}, [user.email])

Answer 2

你不能那样做。这是因为最初没有什么叫做 user.email 。获取数据后，您有一个名为 user 的东西，它具有属性的电子邮件。如果您只想将电子邮件的值放在输入标签的值属性中，只需 const INITIAL_STATE = { email: "" } 也在您的 onChange 中执行 setDetailsToUpdate({ ...detailsToUpdate, email: e.target.value })

您也不需要 await setUser(parsedDetails) 因为设置状态值是异步的。

从异步存储中获取并将其设置为 INITIAL_STATE 返回 null

Fetching from Async Storage and setting it to INITIAL_STATE comes back null

reactjs

react-native

asyncstorage