Question

我获取数据并想用新接收的数据设置状态。我有一个特殊的数据获取功能（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?
    }, [])
}

Answer 1

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

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

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

Answer 2

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

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

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

获取数据后如何设置状态

2 个答案: