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);

的输出

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

完整代码如下。

   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

您可以直接使数组处于状态，

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

Answer 2

setState是异步的，它在范围内成批执行。您正在更新正确的状态，但是在进行控制台操作的下一行中，直到该时间状态未更新为止，这样它才显示默认值或旧值。您可以使用async和await。如果使用类组件，则this.setState有一个回调选项，它将解决此问题。但是，由于您使用的是useState挂钩，因此默认情况下不可用，但是有另一个useState回调库请用google搜索。否则，在将控制台更新后，将其置于useEffect挂钩之外。您可以获得结果。

如何在功能组件状态下将AXIOS的响应分配给数组（React Hooks）

2 个答案: