Javascript 试图映射数据数组并将项推送到不同的数组

我现在正在构建一个函数，它接收来自API调用的数据，通过它进行映射（它是一个对象数组），并根据它的一个值将一个项推送到相应的数组中

然而，它似乎只是将一个项目推入每个阵列，而不是更多

我的代码中没有错误，因此不确定我做错了什么-我假设每次都覆盖数组，但不确定

以下是项目需要推入的状态数组：

const [backlog, setBacklog] = useState([])
const [inProgress, setInProgress] = useState([])
const [paused, setPaused] = useState([])
const [completed, setCompleted] = useState([])

下面是函数本身：

const fetchData = async () => {
    await axios.get("/api/fetch/fetchData")
        .then(async (response) => {

            const data = await response.data;

            setAllTasks(data)

            data.map(item => {

                if (item.status === 'backlog') {
                    setBacklog([...backlog, item])
                } else if (item.status === 'in-progress') {
                    console.log(item)
                    setInProgress([...inProgress, item])
                } else if (item.status === 'paused') {
                    setPaused([...paused, item])
                } else if (item.status === 'completed') {
                    setCompleted([...completed, item])
                }
                
            })
        })
    }

---

因为集合函数是批处理的，所以变量可能尚未更新

要按原样修改程序，请使用函数状态更新：

const fetchData=async（）=>{
等待axios.get（“/api/fetch/fetchData”）
。然后（异步（响应）=>{
常量数据=等待响应。数据；
setAllTasks（数据）
data.map（项=>{
如果（item.status==='backlog'）{
挫折日志（prevBackLog=>[…prevBackLog，项]）
}else if（item.status===‘进行中’）{
console.log（项目）
setInProgress（prevInProgress=>[…prevInProgress，项]）
}否则，如果（item.status===“暂停”）{
setPaused（prevPaused=>[…prevPaused，项]）
}否则，如果（item.status==‘已完成’）{
setCompleted（prevSetCompleted=>[…prevSetCompleted，项目]）
}
})
})
}

---

注意：最好能想出一种方法，使用单个set函数在一次状态更新中更新所有这些值

当前可用的set函数可能会构建一个完整的状态，并对每个状态执行一次更新，例如：

函数分组依据（arr，属性）{
返回arr.reduce（功能（备忘录，x）{
如果（！备注[x[属性]]）{
备注[x[属性]]=[]；
}
备注[x[属性]]。推送（x）；
返回备忘录；
}, {});
}
数据=分组依据（数据“状态”）
setBacklog（prevBackLog=>[…prevBackLog，…数据['backlog']]）
setInProgress（prevInProgress=>[…prevInProgress，…数据['正在进行]]
setPaused（prevPaused=>[…prevPaused，…data['paused']]
setCompleted（prevSetCompleted=>[…prevSetCompleted，…data['completed']]

由于集合函数是批处理的，因此变量可能尚未更新

要按原样修改程序，请使用函数状态更新：

const fetchData=async（）=>{
等待axios.get（“/api/fetch/fetchData”）
。然后（异步（响应）=>{
常量数据=等待响应。数据；
setAllTasks（数据）
data.map（项=>{
如果（item.status==='backlog'）{
挫折日志（prevBackLog=>[…prevBackLog，项]）
}else if（item.status===‘进行中’）{
console.log（项目）
setInProgress（prevInProgress=>[…prevInProgress，项]）
}否则，如果（item.status===“暂停”）{
setPaused（prevPaused=>[…prevPaused，项]）
}否则，如果（item.status==‘已完成’）{
setCompleted（prevSetCompleted=>[…prevSetCompleted，项目]）
}
})
})
}

---

注意：最好能想出一种方法，使用单个set函数在一次状态更新中更新所有这些值

当前可用的set函数可能会构建一个完整的状态，并对每个状态执行一次更新，例如：

函数分组依据（arr，属性）{
返回arr.reduce（功能（备忘录，x）{
如果（！备注[x[属性]]）{
备注[x[属性]]=[]；
}
备注[x[属性]]。推送（x）；
返回备忘录；
}, {});
}
数据=分组依据（数据“状态”）
setBacklog（prevBackLog=>[…prevBackLog，…数据['backlog']]）
setInProgress（prevInProgress=>[…prevInProgress，…数据['正在进行]]
setPaused（prevPaused=>[…prevPaused，…data['paused']]
setCompleted（prevSetCompleted=>[…prevSetCompleted，…data['completed']]

我认为您的axios调用比需要的复杂得多。所有这些额外的async/await&then调用可能都是您的问题。这里有一个更简单的解决方案：

const fetchData = async () => {
    const response = await axios.get("/api/fetch/fetchData");
    const data = response.data;

    data.map(item => {

                if (item.status === 'backlog') {
                    setBacklog(prevBackLog => [...prevBackLog, item])
                } else if (item.status === 'in-progress') {
                    console.log(item)
                    setInProgress(prevInProgress => [...prevInProgress, item])
                } else if (item.status === 'paused') {
                    setPaused(prevPaused => [...prevPaused, item])
                } else if (item.status === 'completed') {
                    setCompleted(prevSetCompleted => [...prevSetCompleted, item])
                }

            })
}

---

我认为您的axios调用比需要的复杂得多。所有这些额外的async/await&then调用可能都是您的问题。这里有一个更简单的解决方案：

const fetchData = async () => {
    const response = await axios.get("/api/fetch/fetchData");
    const data = response.data;

    data.map(item => {

                if (item.status === 'backlog') {
                    setBacklog(prevBackLog => [...prevBackLog, item])
                } else if (item.status === 'in-progress') {
                    console.log(item)
                    setInProgress(prevInProgress => [...prevInProgress, item])
                } else if (item.status === 'paused') {
                    setPaused(prevPaused => [...prevPaused, item])
                } else if (item.status === 'completed') {
                    setCompleted(prevSetCompleted => [...prevSetCompleted, item])
                }

            })
}

---

你必须在地图上返回。如果您将数据传递给各自的设置者，则不确定您起诉map的原因。

setBacklog

是异步的，因此

backlog

不能保证您使用

setBacklog

添加的项。这是否回答了您的问题？你必须在地图上返回。如果您将数据传递给各自的设置者，则不确定您起诉map的原因。

setBacklog

是异步的，因此

backlog

不能保证您使用

setBacklog

添加的项。这是否回答了您的问题？谢谢亨利，第一个建议奏效了。我同意，这太重复我自己了。按照你说的把它们都分组会更好。我会想一想，然后照你的建议去做。出于兴趣，你能解释更多为什么我必须使用集合函数吗？请参阅中的注释，谢谢Henry-第一个建议奏效了。我同意，这太重复我自己了。按照你说的把它们都分组会更好。我会想一想，然后照你的建议去做。出于兴趣，您是否能够进一步解释为什么我必须使用集合函数？请参阅中的说明，并感谢您的回答-此方法将适用于集合函数。我需要.then（），因为后面还有进一步的链接和操作。这不是全部功能。感激