如何过滤数组并将值添加到状态答案

【问题标题】：How to filter an array and add values to a state如何过滤数组并将值添加到状态
【发布时间】：2021-03-20 06:07:04
【问题描述】：

我的当前状态为：

  const [data, setData] = useState([
    { id: 1, name: "One", isChecked: false },
    { id: 2, name: "Two", isChecked: true },
    { id: 3, name: "Three", isChecked: false }
    ]);

我通过状态映射并在 div 中显示数据并调用 onClicked 函数以在点击时切换 isChecked 值：

    const clickData = index => {
      const newDatas = [...data];
      newDatas[index].isChecked = !newDatas[index].isChecked;
      setData(newDatas);

    const newSelected = [...selected];
    const temp = datas.filter(isChecked==true) // incomplete code, struggling here.
    const temp = datas.isChecked ? 
    };

我还有另一个名为 clicked 的空状态： const[clicked, setClicked] = setState([])。我想将所有 isChecked 为 true 的对象从 datas 数组添加到该数组中。我该怎么做？

【问题讨论】：

您可以在 clickData 函数中执行此操作。如果新的 isClicked 为真，那么您将数据推送到 clicked 的克隆并将克隆设置为新的 clicked。如果它不是并且被点击，你制作一个克隆，从该克隆中删除它并将克隆设置为新点击

标签： javascript reactjs setstate

【解决方案1】：

我只是添加了 checkBox 和 onChange 事件，而不是使用 div 和 onClick 事件以供您理解

import React, { useState, useEffect } from "react";
import "./style.css";

export default function App() {
  const [data, setData] = useState([
    { id: 1, name: "One", isChecked: false },
    { id: 2, name: "Two", isChecked: true },
    { id: 3, name: "Three", isChecked: false }
  ]);
  const [clicked, setClicked] = useState([]);

  const clickData = index => {
    let tempData = data.map(res => {
      if (res.id !== index) {
        return res;
      }
      res.isChecked = !res.isChecked;
      return res;
    });
    setClicked(tempData.filter(res => res.isChecked));
  };
  useEffect(() => {
    setClicked(data.filter(res => res.isChecked));
  }, []);

  return (
    <div>
      {data.map((res, i) => (
        <div key={i}>
          <input
            type="checkbox"
            checked={res.isChecked}
            key={i}
            onChange={() => {
              clickData(res.id);
            }}
          />
          <label>{res.name}</label>
        </div>
      ))}
      {clicked.map(({ name }, i) => (
        <p key={i}>{name}</p>
      ))}
    </div>
  );
}

https://stackblitz.com/edit/react-y4fdzm?file=src/App.js

【讨论】：

【解决方案2】：

假设您以类似的方式遍历数据：

{data.map((obj, index) => <div key={index} onClick={handleClick}>{obj.name}</div>}

您可以添加一个数据属性，在其中为该元素分配选中的值，如下所示：

{data.map((obj, index) => <div key={index} data-checked={obj.isChecked} data-index={index} onClick={handleClick}>{obj.name}</div>}

由此，您现在可以在调用 handleClick 函数时更新您的 isClicked 状态，如下所示：

const handleClick = (event) => {
   event.preventDefault()

   const checked = event.target.getAttribute("data-checked")
   const index = event.target.getAttribute("data-index")

   // everytime one of the elements get clicked, it gets added to isClicked array state if true
   If (checked) {
      let tempArr = [ ...isClicked ]
      tempArr[index] = checked
      setClicked(tempArr)
   }
}

这将使您可以在每次单击时将项目一个一个添加到数组中，但是如果您希望单击一下即可添加所有真实值，那么您只需编写handleClick，如下所示：

const handleClick = (event) => {
   event.preventDefault()

   // filter data objects selecting only the ones with isChecked property on true
   setClicked(data.filter(obj => obj.isChecked))
}

我很抱歉，因为我一直在用手机打字，所以缩进有点不对劲。希望这会有所帮助！

【讨论】：