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

Question

我的当前状态为：

  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 数组添加到此数组。我该怎么做？

Answer 1

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

{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))
}

我很抱歉，因为我一直在 phone 打字，所以缩进有点偏离。希望这对您有所帮助！

Answer 2

为了您的理解，我只是添加了 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

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

How to filter an array and add values to a state

javascript

setstate

reactjs