如何映射对象数组并切换选定的布尔属性

Question

我在 React 功能组件中有状态。它是对象数组。该集合中的每个对象都有属性“selected”，它是一个布尔值。该数组如下所示：

const [filterOptions, setFilterOptions] = useState([
        {
            title: 'highest',
            selected: true,
        },
        {
            title: 'lowest',
            selected: false,
        },
    ]);

handleFilter func 执行后，我需要设置状态，以便该数组具有相同的标题属性但反向（切换）选定的属性。

这是 handleFilter 函数，我需要在其中切换数组对象的每个选定属性：

const handleFilter = () => {
        setFilterOptions();
    };

Answer 1

function App() {

    const [filterOptions, setFilterOptions] = useState([
        {
            title: 'highest',
            selected: true,
        },
        {
            title: 'lowest',
            selected: false,
        },
    ]);

    const handleFilter = (e) => {
        let newArr = [...filterOptions];

        let value = e.target.value;

        if (value === "lowest") {

            newArr[0].selected = true;
            newArr[1].selected = false;

        } else if (value === "highest") {

            newArr[0].selected = false;
            newArr[1].selected = true;

        } 

        setFilterOptions(newArr)

    };
    return (
        <div>
            <select onChange={handleFilter}>
                <option value="lowest">a</option>
                <option value="highest">b</option>
            </select>
            {console.log((filterOptions))}
        </div>
    );
}

Answer 2

请检查希望它会工作

var arryObj =[
        {
            title: 'highest',
            selected: true,
        },
        {
            title: 'lowest',
            selected: false,
        },
    ]

const handleFilter = (index,value) => {
    arryObj[index].selected = value
    };
handleFilter(0,false)
console.log(arryObj)
handleFilter(1,true)
console.log(arryObj)

Answer 3

您可以将函数传递给setFilterOptions，以根据之前的状态更改状态。

const handleFilter = () => {
    setFilterOptions(prevState => 
        prevState.map(obj => ({...obj, selected: !obj.selected}))
    );
};