Javascript 在异步循环中设置useState挂钩

我对reactJs很陌生

我试图在异步循环中连接结果，但出现了一些问题。 setState未正确保存，当我打印它时，我可以看到它是一个空数组，我认为这是因为异步调用中存在

我怎样才能解决这个问题？请推荐我

function App() {

  const [data, setData] = useState({data:[]});

  const handleChildSubmit = (data) => {
    setData(data);
  }

  return (
    <div>
      <Form onChildSubmit={handleChildSubmit} />
      <Results flights={data} />
    </div>
  );
}

const Form = ( {onChildSubmit} ) => {

    const [dati, setDati] = useState([]);

    const onFormSubmit = async (e) => {
        e.preventDefault();

        // Flights search Parameters
        const data = new FormData(e.target);
        const dateFrom = data.get('dateFrom');
        const dateTo = data.get('dateTo');
        const departureDay = data.get('day');
        const placeFrom = data.get('placeFrom');
        const placeTo = data.get('placeTo');
        let dayDeparture;
        const daysDeparture = getDayOfWeekArray(dateFrom,dateTo,departureDay);

        // Loop of Fly Search in range time
        for(let i=0; i < daysDeparture.length; i++){
            dayDeparture = daysDeparture[i];
            axios.get('https://api.skypicker.com/flights?flyFrom='+placeFrom+'&to='+placeTo+'&dateFrom='+dayDeparture+'&dateTo='+dayDeparture+'&partner=picky')
            .then(res => {

                setDati([...dati, res.data]);
                onChildSubmit(dati);

            })
            .catch(function (error) {
                console.log('error: '+error);
            })
            .finally(function () {
            });
        }

    }

函数应用程序（）{
const[data，setData]=useState（{data:[]}）；
常量handleChildSubmit=（数据）=>{
setData（数据）；
}
返回(
);
}
常量形式=（{onChildSubmit}）=>{
const[dati，setDati]=useState（[]）；
const onFormSubmit=async（e）=>{
e、 预防默认值（）；
//航班搜索参数
常数数据=新的FormData（如目标）；
const dateFrom=data.get（'dateFrom'）；
const dateTo=data.get（'dateTo'）；
const departureDay=data.get（'day'）；
const placeFrom=data.get（'placeFrom'）；
const placeTo=data.get（'placeTo'）；
让我们离开；
const daysDeparture=getDayOfWeekArray（dateFrom、dateTo、departureDay）；
//范围时间内的飞行搜索循环
for（设i=0；i{
setDati（[…dati，res.data]）；
onChildSubmit（dati）；
})
.catch（函数（错误）{
console.log（'错误：'+错误）；
})
.最后（函数（）{
});
}
}

问题在于

useState

这里为您提供了带有特定值的

dati

变量。然后您的异步工作发生，并且

setDati（）

被多次调用，但是

dati

在重新呈现表单，然后再次调用

onFormSubmit

之前不会更改

你有几个选择

只能将结果作为数组添加一次

const results = []

for(let i=0; i < daysDeparture.length; i++){
    dayDeparture = daysDeparture[i];
    const res = await axios.get('https://api.skypicker.com/flights?flyFrom='+placeFrom+'&to='+placeTo+'&dateFrom='+dayDeparture+'&dateTo='+dayDeparture+'&partner=picky');
    results.push(res.data);
}

// Add all results when all are fetched.
setDati([...dati, ...results])

---

useState提供了一种在更新时使用前一个状态的方法（就像使用类组件时的回调方法），可以对此进行尝试

        .then(res => {
            setDati(prevDati => ([...prevDati, res.data]));
            onChildSubmit(dati);

        })

---

另一方面，您的

async

函数没有

await

表达式。您可以使用

then（）

来解决您的承诺。

        .then(res => {
            setDati(prevDati => ([...prevDati, res.data]));
            onChildSubmit(dati);

        })