我想要實作的是在名為 filterListValue 的 fitlerRequest 函式應該操作之后。
但是在radioHandleChange 上發生了什么，它開始操縱filterListValue。
我認為它們具有相同的記憶體參考，但如何復制它？
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()
};
}
uj5u.com熱心網友回復：
只需使用.... 雖然沒有提到，貌似props.filterListValue是一個陣列。因此，在使用 useState 鉤子開始時創建一個副本。此外，在設定單選值時，復制該專案（因為它是一個物件），這樣您就不會錯誤地改變狀態。
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：
您可以在函式引數括號內進行解構。這是常見的做法：
export default function CustomFilter({filterListValue, setFilterListValue}) {
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/418443.html
標籤：