Reactjs 是否有可能在api调用之后立即获得值？

假设我有一个反应组分

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function BookFunction() {

    const [bookData, setBookData] = useState([]);
    const [randomValue, setRandomValue] = useState([])

        function fetchInfo() {
            axios.post(`/api/book/bookDetails`).then((data) => {
                setBookData(data.data)
                }).catch(error => {
                    console.log(error);
                })
                console.log(bookData) => Gives empty array
                const bookReadingTime = bookData.filter(based on somethings)
                setRandomValue(bookReadingTime)
        }
     
     return(
         <div><button onClick={fetchInfo}/> </div>
         {randomValue === undefined ? <p>{randomValue} </p> :null}
     )

} 

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
导出默认函数BookFunction（）{
const[bookData，setBookData]=useState（[]）；
常量[randomValue，setRandomValue]=useState（[]）
函数fetchInfo（）{
post（`/api/book/bookDetails`）。然后（（数据）=>{
setBookData（data.data）
}).catch（错误=>{
console.log（错误）；
})
console.log（bookData）=>提供空数组
const bookReadingTime=bookData.filter（基于某些东西）
setRandomValue（bookReadingTime）
}
返回(
{randomValue==未定义？{randomValue}
:null}
)
} 

---

当我调用此函数并打印它给我的值时，是否有任何方法，因为我需要将其设置为随机值并传递到要显示的段落？如果有人需要任何进一步的信息，请告诉我。

您可以在中直接更新randomValue状态。然后是承诺

export default function BookFunction() {

    const [bookData, setBookData] = useState([]);
    const [randomValue, setRandomValue] = useState([])

        function fetchInfo() {
            axios.post(`/api/book/bookDetails`).then((data) => {
                setBookData(data.data);
                setRandomValue(data.data);
                }).catch(error => {
                    console.log(error);
                })
                
        }
     
     return(
         <div><button onClick={fetchInfo}/> </div>
         {randomValue === undefined ? <p>{randomValue} </p> :null}
     )

} 

---

您可以在中直接更新randomValue状态。然后更新承诺

export default function BookFunction() {

    const [bookData, setBookData] = useState([]);
    const [randomValue, setRandomValue] = useState([])

        function fetchInfo() {
            axios.post(`/api/book/bookDetails`).then((data) => {
                setBookData(data.data);
                setRandomValue(data.data);
                }).catch(error => {
                    console.log(error);
                })
                
        }
     
     return(
         <div><button onClick={fetchInfo}/> </div>
         {randomValue === undefined ? <p>{randomValue} </p> :null}
     )

} 

---

是的，您可以访问块中的数据

function fetchInfo() {
        axios.post(`/api/book/bookDetails`).then((data) => {
            setBookData(data.data)
            setRandomValue(data.data)
            }).catch(error => {
                console.log(error);
            })      
    }

---

您正在使用

data.data

value更新

bookData

varaible。要在

randomvalue

中更新的

bookData

。您可以尝试上述语法。

是的，您可以访问then块中的数据

function fetchInfo() {
        axios.post(`/api/book/bookDetails`).then((data) => {
            setBookData(data.data)
            setRandomValue(data.data)
            }).catch(error => {
                console.log(error);
            })      
    }

---

您正在使用

data.data

value更新

bookData

varaible。要在

randomvalue

中更新的

bookData

。您可以尝试以上语法。

您必须使用

useffect

首先，您的

fetchInfo

应该在它里面。 另外，您不需要两种状态，在您的示例中有相同的状态

useEffect(() => {
  function fetchInfo() {
    axios.post(`/api/book/bookDetails`).then((data) => {
      setBookData(data.data);
    }).catch(error => {
      console.log(error);
    })
  }
})

这里还有一个问题，您应该只返回一个标记

return(
    <div>
        <button onClick={fetchInfo}>Fetch</button>
        {randomValue === undefined ? <p>{randomValue} </p> :null}
    </div>
)

返回(
取来
{randomValue==未定义？{randomValue}
:null}
)

您必须使用

useffect

首先，您的

fetchInfo

应该在它里面。 另外，您不需要两种状态，在您的示例中有相同的状态

useEffect(() => {
  function fetchInfo() {
    axios.post(`/api/book/bookDetails`).then((data) => {
      setBookData(data.data);
    }).catch(error => {
      console.log(error);
    })
  }
})

这里还有一个问题，您应该只返回一个标记

return(
    <div>
        <button onClick={fetchInfo}>Fetch</button>
        {randomValue === undefined ? <p>{randomValue} </p> :null}
    </div>
)

返回(
取来
{randomValue==未定义？{randomValue}
:null}
)

如果您希望代码在请求完成后执行，它需要位于

内，然后调用
setBookData
否则它将在请求任何数据之前运行。如果您希望代码在请求完成后执行，它需要位于
内，然后调用
setBookData
否则，它将在请求任何数据之前运行；我已经编辑了这个问题，因为我想它不清楚。我不想使用useffect。应调用按钮函数的onclick，并从api获取值，在bookDetails中设置执行一些操作并设置为randomValue。我希望现在已经很清楚了。@SivaPradhan，useEffect并没有像你提到的那样使用，而是像我在代码中使用的那样。它有效的作用是，在设置bookData之后，您可以对bookData执行任何操作，并更新randomValue状态。您还可以使用第一种解决方案，使用从api获得的数据更新randomValue状态，而不是依赖bookData状态。您是否能够在useEffect（）中打印书籍数据的值，例如：useEffect（（）=>{if（bookData）{console.log（'bookData'，bookData'）}，[bookData]）；因为它给我一片空白。书本数据中没有值单击按钮获取信息后，是否检查日志？因为如果您的数据在bookData状态下正确地获取和更新，那么它应该工作，不是吗，请使用effect（（）=>{fetchInfo（）；setRandomValue（bookData）；}，[bookData]）；我已经编辑了这个问题，因为我想它不清楚。我不想使用useffect。应调用按钮函数的onclick，并从api获取值，在bookDetails中设置执行一些操作并设置为randomValue。我希望现在已经很清楚了。@SivaPradhan，useEffect并没有像你提到的那样使用，而是像我在代码中使用的那样。它有效的作用是，在设置bookData之后，您可以对bookData执行任何操作，并更新randomValue状态。您还可以使用第一种解决方案，使用从api获得的数据更新randomValue状态，而不是依赖bookData状态。您是否能够在useEffect（）中打印书籍数据的值，例如：useEffect（（）=>{if（bookData）{console.log（'bookData'，bookData'）}，[bookData]）；因为它给我一片空白。书本数据中没有值单击按钮获取信息后，是否检查日志？因为如果您的数据在bookData状态下正确获取和更新，它应该可以工作。我已经编辑了问题，请看一看。您也可以将过滤部分包含在then块中。我已经编辑了问题，请看一看。您也可以将过滤部分包含在then块中。