Javascript 当我多次单击该按钮时，数组将获得一个值。我希望它接受函数中的所有值

我有一个listAPI值，从中可以获得API中的信息。其输出如下

//output - console.log(listAPI)

5) [{…}, {…}, {…}, {…}, {…}]
0: {id: "1", name: "name 1", active: "true"}
1: {id: "2", name: "name 2", active: "false"}
2: {id: "3", name: "name 3", active: "false"}
3: {id: "4", name: "name 4", active: "true"}
4: {id: "5", name: "name 5", active: "true"}

当我单击Select按钮时，我想将这些数据映射到第一个列表中的活动值，将false值映射到第二个列表中

然后我打开一个模式，并在输入部分显示firstList和secondList值

const selectAll = () => {
        console.log(listAPI)
        listAPI.map((data) => {
            console.log(data) 
            if (data.active === false) {
                console.log(data.name)
                setFirstList([...firstList,data.id])
            }
            else {
                setSecondList([...secondList, data.id])
            }
        })
        console.log(firstList)
        console.log(secondList)
     }

---

代码运行时，firstList和secondList值不填充。我怎样才能解决这个问题？我不明白为什么它不起作用。它只是不向列表中添加值。当我多次单击“选择”按钮时，它才开始添加最后一个值。

状态更新不同步。尝试使用以下方法：

listAPI.forEach((data) => {
   if (data.active === "false") {
       setFirstList((prevFirstList) => [...prevFirstList, data.id]);
    else {
        setSecondList((prevSecondList) => [...prevSecondList, data.id]);
    }
});

编辑：根据更新的比较

长版本：

listAPI.forEach((data) => {
      if (data.active === "false") {
        setFirstList((prevFirstList) => {
          const newFirstList = [...prevFirstList, data.id];
          console.log(newFirstList);
          return newFirstList;
        });
        else {
          setSecondList((prevSecondList) => {
            const newSecondList = [...prevSecondList, data.id];
            console.log(newSecondList);
            return newSecondList;
          });
        }
      });

代码中的原因：

if (data.active === false)

---

将

数据.active

字符串

与
false
进行比较，后者是
布尔值
您可以检查每个对象的
激活
状态，并使用reducer函数将其映射到结果

const key=isActive=='true'？'活动“：“非活动”


const listApi=[
{id:“1”，name:“name 1”，active:“true”}，
{id:“2”，name:“name 2”，active:“false”}，
{id:“3”，name:“name 3”，active:“false”}，
{id:“4”，name:“name 4”，active:“true”}，
{id:“5”，name:“name 5”，active:“true”}，
];
const result=listApi.reduce（（acc，{active:isActive，…rest}）=>
（（key=>（{…acc，[key]：[…acc[key]，{…rest}]}））
（isActive=='true'？'active'：'inactive'），{active:[]，inactive:[]}）；
控制台日志（结果）
作为控制台包装{top:0；最大高度：100%！important；}
HTML或模式JS代码在哪里？setFirstList（）和setSecondList（）函数是什么？const[firstList，setFirstList]=useState（[]）；const[secondList，setSecondList]=useState（[]）；这仍然会失败，您正在比较第一个IF语句中的类型，而它们共享两种不同的类型。将===更改为==应该可以修复它。@未知它们都是字符串吗？也许我错过了什么不必担心，你已经编辑并修复了这篇文章。