在react js中的setState中设置数组值

Question

我想在set状态(setArraytime(中添加数据，但数组数据值没有反映在setstate中。

const [vehicle_type, setVehicleType] = useState("");
const [endTime, setEndtime] = useState("");
const [startTime, setStartTime] = useState("");

const [array_time, SetArrayTime] = useState([]);
let value = {
interval: vehicle_type,
startTime: startTime,
endTime: endTime,
};
const doArrayChunks = () => {

var inputDataFormat = "HH:mm a";
var outputFormat = "HH:mm a";
var tmp = moment(vehicle_type, inputDataFormat);
var dif = tmp - moment().startOf("day");
var startIntervalTime = moment(startTime, inputDataFormat).add(-dif, "ms");
var endIntervalTime = moment(startTime, inputDataFormat);
var finishTime = moment(endTime, inputDataFormat);

var intervals = [];
while (startIntervalTime < finishTime) {
var format =
startIntervalTime.format(outputFormat) +
" - " +
endIntervalTime.format(outputFormat);
intervals.push(format);
startIntervalTime.add(dif, "ms");
endIntervalTime.add(dif, "ms");
console.log("Intervals", intervals);
SetArrayTime(intervals);
console.log("array_time", array_time);
}
};

Answer 1

通过查看代码，我可以看到您希望将array_time的前一个值替换为interval数组。你可以使用以下语法

SetArrayTime(prev_array_time => {
let newArray = [...prev_array_time]
newArray.push(intervals)
return newArray
});

这应该能胜任工作。

状态更新可能是异步

上面的线程将帮助您了解后台发生的事情

Answer 2

React在调用堆栈为空时更改state的值。正如React文档中所提到的，不能保证setState被同步激发，因此您的console.log可能会在更新之前返回状态。

如果您想使用
写入，可以等待调用堆栈为空

setTimeout(callback, 0)

https://developer.mozilla.org/en-US/docs/Glossary/Call_stack

Answer 3

我建议尝试在更新函数中公开以前的数组，如下所示：

SetArrayTime(existingArray => [...existingArray, ...intervals])