如何在 React 中使用获取的数据设置状态答案

【问题标题】：How to setState with fetched data in React如何在 React 中使用获取的数据设置状态
【发布时间】：2022-02-06 14:15:20
【问题描述】：

我需要 setState 使用我从 redux store 获取的对象。问题是当我在我的组件中调用setState 时，我得到undefined。关于如何使用获取的数据设置默认状态值的任何想法？

这是我的组件：

import React, { useEffect, Fragment, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const contactDetails = useSelector((state) => state.contactDetails)

const upFields = contactDetails?.contact?.data?.fields


const [contact, setContact] = useState({
    fields:  upFields <---- this is returning undefined.. The name is correct, but maybe setState is running too fast? 
  })
  

console.log(contact) <---- this shows {fields: undefined}



console.log(upFields) <---- this console.logs just fine

【问题讨论】：

标签： javascript node.js reactjs redux

【解决方案1】：

您使用useEffect() 并使用对象触发它

useEffect(()=>{
  setContact(fetched_data)
}, [fetched_data]) // <-- data array will trigger every time this data change

您可以在第一个组件挂载时触发它

useEffect(()=>{
  setContact(fetched_data)
}, []) // <-- empty array will only trigger once

【讨论】：

【解决方案2】：

因此，我最终将状态设置为更高的一个组件，并将“upFields”传递给需要此状态的子组件。一旦进入子组件，我只需使用我需要的数据运行 useEffect 和 setState

【讨论】：