Lo que estoy tratando de lograr es después de que la función fitlerRequest llamada filterListValue se manipule.
Pero lo que sucede es que radioHandleChange comienza a manipular filterListValue.
Creo que tienen la misma referencia de memoria, pero ¿cómo hacer una copia?
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() }; }Simplemente haga copias usando ... . Aunque no se menciona, parece que props.filterListValue es una matriz. Así que crea una copia cuando comiences con useState hook. Además, al configurar el valor de radio, haga una copia del elemento (ya que es un objeto) para que no esté mutando el estado por error.
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 }); }PD:
Puede desestructurar dentro del paréntesis del argumento de la función. Es una práctica común:
export default function CustomFilter({filterListValue, setFilterListValue}) {