无法在我的本地 state 中使用钩子在反应中设置响应数据

Question

我正在使用功能组件并且是初学者。我成功地收到了来自 API 的响应，但是当我将其设置为本地 useState 变量时，它仍然是空的。我无法理解如何解决这个问题。

方法一：

const [sites,setSites]=useState([]);
useEffect(()=>{
    getAllSites().then(res=>{
      console.log("res",res.sites);//response received successfully
      setSites(res.sites);
      console.log(sites);//return empty array
    })
    .catch(err=>{
      console.log("Error:",err);
    })
  },[])

方法二：

const [sites,setSites]=useState([]);
useEffect(()=>{
    getAllSites().then(res=>{
      console.log("res",res.sites);
    },(res)=>{
     setSites(res);//thought maybe because of async nature, so tried using callback but still empty 
})
    .catch(err=>{
      console.log("Error:",err);
    })
  },[])

有人可以帮我解决这个问题吗？

Answer 1

在 react 中更新 state 不会同步发生。 这意味着当您调用setSites时，state 将不会得到更新，而更改或更新的 state 将在下一次渲染中可用。

为了查看这是否有效，我们可以通过将state变量作为依赖项传递来使用useEffect钩子

 const {useState, useEffect} = React; const getAllSites = () => { return new Promise(res => { setTimeout(() => { return res({sites:[{id:1, name:"Google"}, {id:2, name:"Facebook"}]}); }, 500) }) } const App = () => { const [sites,setSites] = useState([]); useEffect(()=>{ getAllSites().then(res=>{ //console.log("res",res.sites);//response received successfully setSites(res.sites); }).catch(err=>{ console.log("Error:",err); }) },[]); useEffect(() => { //This will print on mount as well as when there's any change in `sites` console.log(sites); }, [sites]) return <p>App</p> } ReactDOM.render(<App />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="react"></div>

而且，在获取数据时，您可以显示加载指示，一旦数据可用，您可以隐藏加载并显示实际数据。

Answer 2

你做的一切都是正确的。 但是您无法在站点中看到立即更新的值（显然它是 const），因此您将在下一个渲染周期看到，当您的功能组件将运行时，react 将为站点分配新值。 一旦 state 更新，就会发生新的重新渲染。 只需将console.log(sites)添加到功能组件的顶层

const [sites,setSites]=useState([]);
console.log(sites);
useEffect(()=>{...},[]);