useState 只改变数组中的一个值

Question

有一个数组对，我正在使用单独的过滤函数来更改数组值。但是我很难在保留现有值的同时仅更改单个值。

const [filters, setFilters] = useState({
        fur: '',
        expression: ''
    })

const filterFur = (fur) => e => {
        setFilters({
            fur: fur
        })
    }

    const filterExpression = (expression) => e => {
        setFilters({
            expression: expression
        })
    }
    
    ...
    
    <label className="label"> 
       <input type="radio" name="checkbox" value="All Furs" onClick={filters.fur === '' ? null : filterFur('')}/> All
    </label>

当 onClick 触发该函数时，它会将 fur 设置为所需的值，但会完全删除 expression。我如何保留 expression 值，同时仅更改 fur?

Answer 1

利用修改所需的状态部分并复制其他部分：

setFilters({ ...filters, fur: fur });
setFilters({ ...filters, expression: expression });

这里有一些官方文档：
https://reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data.
https://reactjs.org/docs/hooks-reference.html#functional-updates.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

useState 只改变数组中的一个值

useState change only one value in array

reactjs

use-state