更新 DOM 而不刷新 React.js 中的页面

Question

我在我的 React 应用程序中从 API（使用 json-服务器构建的假 REST API）获取数据。我希望应用程序自动更新而无需手动刷新，因为 API 中发生任何更改。我该怎么做呢？代码如下：

import './App.css'
import React, {useState, useEffect} from 'react'
import axios from 'axios'

export default function App() {
const [post, setPost]=useState([])
const url="http://localhost:3000/users"

useEffect(()=>{
axios
.get(url)
.then(res=>{
   setPost(res.data)
})
.catch(err=>{
    console.log(err)
})

},[])

const showUsers=
post.map(item=>{
return(
<div className="card" key={item.id}>
<h2>Name: {item.name}</h2>
<h3>Username: {item.username}</h3>
<p>Email:{item.email}</p>
</div>
        
)
})}

return (
<div className="container">
{showUsers}
</div>
   )
}

注意我试图将 post 状态变量放入 useEffect 挂钩的依赖数组中，它按我的意愿工作，但它开始向服务器发送无限 get requests。类似的东西

useEffect(()=>{
axios
.get(url)
.then(res=>{
   setPost(res.data)
})
.catch(err=>{
    console.log(err)
})

},[post])

Answer 1

默认情况下每次更新时使用运行。

如果你给,[post])

如果某些值 (post) 在重新渲染之间没有改变，它会告诉 React 跳过应用效果。

如果您只想在挂载时获取，请使用 ,[])

react 文档解释得很好： Optimizing Performance by Skipping Effects

Answer 2

首先说一下为什么把post放在useEffect依赖中会导致无限请求。如前所述：

You can tell React to skip applying an effect if certain values haven’t changed between re-renders.

但问题是，每次调用效果，实际上是通过调用setPost来改变post。这会导致重新渲染。当 React 正在重新渲染时，它会检查是否应该再次运行效果。由于 useEffect 中的变量 post 已经改变，react 决定再次运行效果。这会导致无限循环。

回到你的主要问题。如果我理解正确的话，您想将您的应用程序状态与有关 posts 的服务器状态同步。您可以通过 polling or websockets. in polling the client send a request to the server every few seconds to check if there has been any chaneges in the state. websockets 使服务器和客户端之间的双向连接成为可能。双向连接使得服务器可以随时向客户端发送信息。

下面是针对您的问题的非常简单的轮询解决方案。我强烈建议您阅读有关该概念的更多信息。

// ommited code
  const [post, setPost]=useState([])
  const url="http://localhost:3000/users"
  const WAIT_TIME = 5000;

  useEffect(() => {
    const id = setInterval(() => {
      axios
     .get(url)
     .then(res=>{
       setPost(res.data);
     })
     .catch(err=>{
       console.log(err);
     })
    }, WAIT_TIME);
    return () => clearInterval(id);
  }, [post]); 
// omitted code

更新 DOM 而不刷新 React.js 中的页面

Update the DOM without refreshing the page in React.js

reactjs

axios

react-hooks

react-state

use-effect