Axios 只获取 Azure API 响应一次。

Question

我正试图使用 Azure REST API 在我的 React 应用程序中使用 axios 获取我的 blobs（并将其解析为 JSON，因为它作为 XML 响应进来）。这里的问题是，它正确地获取了一次，当页面被刷新时，它没有获取任何其他内容，每当我试图访问任何数据时，都会显示未定义，并在控制台中返回空数组......我做错了什么？

const [images, setImgs] = useState([])

useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(`https://${process.env.AZURE_SPACE}.blob.core.windows.net/${process.env.AZURE_CONTAINER}?restype=container&comp=list&${process.env.AZURE_TOKEN}`);
      const newJson = JSON.parse(convert.xml2json(response.data, {compact: true, spaces: 4}))
      setImgs(newJson);
    }
  fetchData();
  console.log(images)
}, []);

Answer 1

试试

await fetchData();

否则，你的控制台日志会在从azure传回的答案之前被调用。

Answer 2

所以，如果你检查 console.log(images) 为什么这个还是空白。

setImgs(newJson); // is also async 

fetchData(); 
console.log(images) //<-- So it won't reflected immediately right after fetchData()

但你的DOM会被更新，你可以确认一下。

---

你可以运行下面的代码段，检查HTML和? conosle.log 都有

setUsers([...users, "Vivan" , "Darshita"]); // is async 
console.log(users); // Due to setUsers's async behaviour it still console.log old values 

const { useState , useEffect } = React;

const App = () => {

  const [users,setUsers] = useState(['Vivek' , 'Darsh']);

  useEffect(() => {
    setTimeout(() => {
      setUsers([...users, "Vivan" , "Darshita"]);
      console.log(users);
    },2000);
  },[]);

  return (
    <div>
      { users.map(user => <p>{user}</p>) }
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

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

Answer 3

所以听起来像是两个不同的问题。

如何解决waiting的问题。

const [images, setImgs] = useState([])

useEffect(() => {
const wrapperFunc = async () => {
    const fetchData = async () => {
      const response = await axios.get(`https://${process.env.AZURE_SPACE}.blob.core.windows.net/${process.env.AZURE_CONTAINER}?restype=container&comp=list&${process.env.AZURE_TOKEN}`);
      const newJson = JSON.parse(convert.xml2json(response.data, {compact: true, spaces: 4}))
      setImgs(newJson);
    }
  await fetchData();
  console.log(images)
};
wrapperFunc();
}, []);

现在wrapperFunc内部的代码可以等待fetchData返回后再写入控制台。

第二个问题，它只被调用一次。由于这段新代码的出现，可以解决这个问题。然而，我在React热加载中遇到了类似的事情，其中门控状态已经被设置，所以它会重新运行我的新代码。我只得手动更改状态，然后代码就会运行。