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

j9per5c4  于 2022-12-21  发布在  Java
关注(0)|答案(3)|浏览(155)

我尝试向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])
    
 }

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

5w9g7ksd

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

brgchamk

brgchamk2#

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

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

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

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

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

e5nqia273#

试着改变

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

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

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

相关问题