如何将来自 AXIOS 的响应分配给处于功能组件状态的数组（React Hooks）

Question

我正在尝试从 axios.post 返回的 result.data 中获取数组，并将其分配给功能组件中的状态。 下面是代码示例。 提前谢谢你。

我已经使用 useState 在功能组件中创建了一个带有空数组的状态，如下所示。

const [pdsummaryState, setpdsummaryState] = useState({
  Data: {
         Results:[]
        }
 });

我正在尝试将 axios.post 返回的数组分配给如下状态

 axios.post(config.api.invokeUrl + '/query', queryData)
    .then((res)=> {
     console.log(res.data);  
     setpdsummaryState(res.data);     
 })    

res.data中的结果如下。

console.log(res.data);的输出

我正在尝试将结果中的数组分配给状态。

完整代码如下。

   const Home = props => {   
         useEffect(() => {
          appInit(); 
          makePostRequest();
        }, []);

       const [pdsummaryState, setpdsummaryState] = useState({
          Data: {
            Results:[]
          }
         });

       async function makePostRequest() {
          axios.post(config.api.invokeUrl + '/query', queryData)
             .then((res)=> {
                 console.log(res.data);  
                 setpdsummaryState(res.data);     
          })    
     }
  }

我希望从对状态数组的响应中获取数组并对其进行迭代以在表格中显示数据。

setpdsummaryState(res.data); 
console.log(pdsummaryState); 

上面是返回一个空数组。 由于某种原因它没有被分配给状态，我可以在我的状态中只有一个数组而不是

Data: { Results:[] } 

只是

Results:[] 

Answer 1

setState 是异步的，它在作用域内批量执行。您正在更新正确的状态，但在下一行执行控制台时，直到该时间状态未更新，因此它显示默认值或旧值。您可以使用异步和等待。 如果你使用类组件，this.setState 有一个回调选项可以解决这个问题。但是由于您使用的是默认情况下不可用的 useState 钩子，但是还有另一个用于 useState 回调的库，请谷歌它。 否则在将控制台更新到useEffect hooks之外后，您可以获得结果。

Answer 2

你可以直接有一个数组在状态，

const [pdsummaryState, setpdsummaryState] = useState([]);

你可以这样设置数据，

async function makePostRequest() {
   axios.post(config.api.invokeUrl + '/query', queryData)
     .then((res)=> {
         console.log(res.data);  
         setpdsummaryState(res.data.Data.Results); //Get only array
         //This will never give you the updated state, because setState is async
         console.log(pdsummaryState);      
     })    
}

你可以像这样直接迭代你的状态，

{
pdsummaryState.map(data=>console.log(data.result))  //check the console and you will get data.
}

阅读更多关于setState