Reactjs 如何在React中使用筛选器并保存状态中的值？

如何在React中使用filter，以便从

数据

中只过滤出选定的真实对象，并且从该过滤对象中只保存

值

如何在Reactjs中完成

我只想将

four

保存在

状态

，因为它只选择了

true

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

const data = [
  {
    key: 1,
    value: "four",
    selected: true
  },
  {
    key: 2,
    value: "fours",
    selected: false
  }
];

export default function App() {
  const [state, setState] = useState();

  console.log(state);

  data.forEach((item) => {
    setState(data.filter((person) => person.selected === true));
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
常数数据=[
{
重点:1,，
值：“四”，
所选：真
},
{
重点:二,，
价值：“四分”，
所选：false
}
];
导出默认函数App（）{
const[state，setState]=useState（）；
console.log（状态）；
data.forEach（（项目）=>{
setState（data.filter（（person）=>person.selected==true））；
});
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

您可以像这样直接在useState中设置：

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

const data = [
  {
    key: 1,
    value: "four",
    selected: true
  },
  {
    key: 2,
    value: "fours",
    selected: false
  }
];

export default function App() {
  const [state, setState] = useState(data.filter((person) => person.selected === true));

  console.log(state);



  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{state[0].value}</h2>
    </div>
  );
}

---

现场演示：

您可以直接在useState中设置，如下所示：

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

const data = [
  {
    key: 1,
    value: "four",
    selected: true
  },
  {
    key: 2,
    value: "fours",
    selected: false
  }
];

export default function App() {
  const [state, setState] = useState(data.filter((person) => person.selected === true));

  console.log(state);



  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{state[0].value}</h2>
    </div>
  );
}

---

实时演示：

您可以利用

useffect

钩子在安装组件时使用过滤数据初始化状态

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

const data = [
    {
        key: 1,
        value: "four",
        selected: true
    },
    {
        key: 2,
        value: "fours",
        selected: false
    }
];

export default function App() {
    const [state, setState] = useState([]);

    useEffect(() => {
        const selectedItems = data.filter(d => d.value);
        setState(selectedItems);
    }, []);

    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
        </div>
    );
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
常数数据=[
{
重点:1,，
值：“四”，
所选：真
},
{
重点:二,，
价值：“四分”，
所选：false
}
];
导出默认函数App（）{
const[state，setState]=useState（[]）；
useffect（（）=>{
const selectedItems=data.filter（d=>d.value）；
设置状态（selectedItems）；
}, []);
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

您可以利用

useffect

钩子在安装组件时使用过滤数据初始化状态

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

const data = [
    {
        key: 1,
        value: "four",
        selected: true
    },
    {
        key: 2,
        value: "fours",
        selected: false
    }
];

export default function App() {
    const [state, setState] = useState([]);

    useEffect(() => {
        const selectedItems = data.filter(d => d.value);
        setState(selectedItems);
    }, []);

    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
        </div>
    );
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
常数数据=[
{
重点:1,，
值：“四”，
所选：真
},
{
重点:二,，
价值：“四分”，
所选：false
}
];
导出默认函数App（）{
const[state，setState]=useState（[]）；
useffect（（）=>{
const selectedItems=data.filter（d=>d.value）；
设置状态（selectedItems）；
}, []);
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

const[state，setState]=useState（data.filter（person=>person.selected））并从render方法中删除
数据。forEach…setState
，否则您将获得无限渲染。我也尝试了这一方法，但它提供了完整的对象，其中我需要
值
仅限您需要另外使用
const[state，setState]=useState（data.filter（person=>person.selected））并从render方法中删除
数据。forEach…setState
，否则您将获得无限渲染。我也尝试了此方法，但它为我提供了所需的完整对象
值
仅限您需要额外使用。我也尝试了此方法，但它为我提供了所需的完整对象，仅限使用“映射”来获取值我也试过了，但它给了我一个完整的对象，因为我只需要使用“map”来计算值