如何在 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}) {