为什么useState在获取数据后不起作用答案

【问题标题】：Why useState doesn't work after fetching data为什么useState在获取数据后不起作用
【发布时间】：2019-03-20 20:54:29
【问题描述】：

当我 console.log 来自 api 的响应时，它就在那里。但是当我尝试通过 usestate 钩子设置状态时，它不会更新状态。

const [data, setData] = useState([])

  const getLocation = () => {
axios
  .get(
    `https://myrequest=${
      process.env.REACT_APP_GOOGLE
    }&address=${location}`
  )
  .then(response => {
    console.log(response) //response is present
    setData(response)
    console.log(data)// data didn't update,empty array
  })

}; //getLocation 由带有 onClick 的按钮调用

【问题讨论】：

我对 javascript 还是有点陌生，如何异步重写我的函数，我认为 promise 正在处理同步的东西

标签： reactjs react-hooks

【解决方案1】：

您的代码正在运行，但 data 不会通过调用 setData 同步更新，并且 data 仍然是对旧数组的引用。

尝试渲染data，你会看到它更新正确。

示例

const { useState } = React;

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(['foo', 'bar'])
    }, 1000)
  })
}

function App() {
  const [data, setData] = useState([])

  function getLocation() {
    getData().then(response => {
      setData(response)
      console.log(data)
    })
  }

  return (
    <div>
      {data.map(item => (
        <div key={item}>{item}</div>
      ))}
      <button onClick={getLocation}>Load location</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：