javascript React useState不设置从Axios接收的值

j9per5c4 于 2022-12-21 发布在 Java

关注(0)|答案(3)|浏览(154)

我尝试向http://localhost:8080/api/RE/template/${pageId}发送GET请求，以显示属于页面特定id的模板项。

房地产模板.js

const TemplateRealEstate = () => {

  const [loadedTemplates, setLoadedTemplates] = useState([])

  const pageId = useParams().pageId;

  const getTemplates = async () => {
    await axios({
      method: "GET",
      url: `http://localhost:8080/api/RE/template/${pageId}`,
      headers: "Content-type: application/json"
    })
      .then((res) => {
        console.log("Respond from the request -->", res)
        setTimeout(() => setLoadedTemplates(res.data.templates), 0);
        console.log("Res.data.templates -->", res.data.templates)
      })
      .catch((err) => {
        console.log(err)
      })

    console.log("Loaded Templates --> ", loadedTemplates)

  }

  useEffect(() => {
    getTemplates();
  }, [pageId])
    
 }

到目前为止，我尝试过使用useCallback、setTimeout。我尝试将loadedTemplates作为useEffect的依赖项添加到useEffect以呈现页面，但它呈现为无穷大。它显示的实际上是无穷大的console.logs。如果我将依赖项留空，它仍然会继续相同的操作。
因为我有表单中的文件，通常我用'Content-Type': 'multipart/form-data'来发出POST请求。我也尝试过改变GET请求中的头文件，但还是一样。为什么会发生这种情况？我有其他的GET请求根本没有这个问题。

JavaScript

来源：https://stackoverflow.com/questions/74870781/react-usestate-does-not-set-the-value-that-receives-from-axios

3条答案

按热度按时间

5w9g7ksd1#

更新将反映在下一次渲染中，这就是react的设计。
举个例子：

const getTemplates = () => {
    console.log(loadedTemplates) // Current state

    axios({
      method: "GET",
      url: `http://localhost:8080/api/RE/template/${pageId}`,
      headers: "Content-type: application/json"
    }).then((res) => {
      setLoadedTemplates(res.data.templates);
      console.log(loadedTemplates) // This won't print the recently updated state, but the same it printed at the beginning of the function
    })
}

请检查：https://stackoverflow.com/a/54069332/4898348

赞(0）回复(0）举报 2022-12-21

brgchamk2#

你做的每件事都是正确的，除了那句台词

console.log("Loaded Templates --> ", loadedTemplates)

因为useState是一个异步函数，它将被添加到系统堆栈中以供以后调用。因此，放在那里console.log将显示旧值。
要正确显示loadedTemplates值：将其移到外面以便下一个渲染显示正确的值.例如：

...
useEffect(() => {
  getTemplates();
}, [pageId])

console.log("Loaded Templates --> ", loadedTemplates)
...

赞(0）回复(0）举报 2022-12-21

e5nqia273#

试着改变

useEffect(() => {
    getTemplates();
  }, [pageId])

到

const location = useLocation()
useEffect(() => {
    getTemplates();
  }, [location])

也不要忘记添加位置依赖从React路由器dom..如果你仍然面临任何问题只是让我知道.谢谢

赞(0）回复(0）举报 2022-12-21

我来回答

javascript React useState不设置从Axios接收的值

3条答案

相关问题

热门标签

最新问答