获取数据后如何设置状态答案

【问题标题】：How to set state after data was fetched获取数据后如何设置状态
【发布时间】：2021-04-10 13:08:31
【问题描述】：

我获取数据并想用新收到的数据设置状态。我有一个特殊的数据获取功能（loadData）和一个我必须设置状态的组件（App）。但是，我无法从 loadData 传递数据。当我写 const res = loadData() 时，我得到 Pending...

async function loadData() {
    let query = `someQuery`;

    let url = 'someUrl',
    options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            query     
        })
    };

const response = await fetch(url, options);
const body = await response.json();
return body.data   // I have to set this data to state
}

const App = () => {
const [state, setState] = useState([])

useEffect(() => {
      loadData(); // here I would like to setState. How to pass in here data 
      received as a result 
          of loadData?
    }, [])
}

【问题讨论】：

这能回答你的问题吗？ How do I return the response from an asynchronous call?

标签： reactjs react-hooks fetch

【解决方案1】：

loadData 是一个async 函数。这意味着，它返回Promise。在这种情况下，您必须执行 await loadData() 才能访问其结果。因为useEffect 中的函数不能是async，所以你必须将它包装在另一个函数中，如下所示：

const App = () => {
    const [state, setState] = useState([])

    useEffect(() => {
        const wrappingFuncion = async () => {
            const res = await loadData();
            setState(res);
        }
        wrappingFunction();
    }, [])
}

【讨论】：

你不能在useEffect里面这样做
是的，不是直接的，但是你可以在里面创建一个async包装函数。
是的，我知道，但寻求帮助的人不知道。所以你可以编辑你的答案来提供它。
...现在您没有调用包装函数。看看async/await 在useEffect 内部是如何无用的？

【解决方案2】：

你当然会得到Pending...，因为它是Promise。

你如何处理 Promise？
在这种情况下，您可以将.then(response => ...) 附加到它，因为您不能在useEffect 中添加await：

useEffect(() => {  
      loadData()  
          .then(response => setState(response.data.results));  
    }, [])

【讨论】：