如何在 React useState Initial State 中传递 object 的副本

Question

我想要实现的是在 fitlerRequest function 调用 filterListValue 应该操作之后。

但是在radioHandleChange 上发生了什么，它开始操纵filterListValue。

我认为他们有相同的 memory 参考，但如何制作它的副本？

export default function CustomFilter(props) {
    const { filterListValue, setFilterListValue } = props;
const [radioValue, setRadioValue] = useState(filterListValue)

const radioHandleChange = (e, list) => {
        setRadioValue(radioValue => {
            let copy = [...radioValue]
            copy[indexChange].value = e.target.value
            copy[indexChange].id = list.id
            return copy
        });
}

const filterRequest = () => {
        setFilterListValue(radioValue)
        handleClose()
    };

}

Answer 1

只需使用...制作副本。 虽然没有提到，看起来props.filterListValue是一个数组。 因此，在使用 useState 钩子开始时创建一个副本。 此外，在设置单选值时，复制该项目（因为它是一个对象），这样您就不会错误地改变 state。

    const { filterListValue, setFilterListValue } = props;
const [radioValue, setRadioValue] = useState([...props.filterListValue])

const radioHandleChange = (e, list) => {
        setRadioValue(radioValue => {
            let copy = [...radioValue]
            let copyItem = {...copy[indexChange]}; 
            copyItem[indexChange].value = e.target.value
            copyItem[indexChange].id = list.id
            return copyItem
        });
}

PS：

您可以在 function 参数括号内进行解构。 这是常见的做法：

export default function CustomFilter({filterListValue, setFilterListValue}) {