Tengo mutliSelect y mi caso es: cuando Value prop es [] (el componente multiSelect obtiene este accesorio), configure mi useState también [].
Intenté escribir algo como esto:
const [selected, setSelected] = useState([]); useEffect(() => { setSelected([]); }, [Value]); <Select style={style} maxTagCount={0} maxTagPlaceholder={maxTagPlaceholder} mode="multiple" placeholder={placeholder} showSearch value={selected} // here I tried to put the Value but not working well onSelect={(val) => onSelectValueMultiSelect(val, selected, setSelected, options)} onDeselect={(val) => onDeselectValueMultiSelect(val, selected, setSelected)}> {childrenOptions} </Select>pero obtengo un error de bucle infinito.
la matriz Value contiene matrices de datos de filtro de formularios, y al hacer clic en el botón 'restablecer filtro', quiero restablecer mi campo multiSelect.
Creo que el problema es cuando setSelected([]) lo llamó y volvió a representar el valor, por lo que useEffect llamó una y otra vez.
Mi componente MultiSelect:
import React, { useEffect, useState } from 'react'; import './MultiSelect.scss'; import { maxTagPlaceholder, onSelectValueMultiSelect, onDeselectValueMultiSelect } from '../Services'; import { Select, Checkbox } from 'antd'; const MultiSelect = ({ options, style, onChangeHandle, placeholder, Value }) => { const [selected, setSelected] = useState([]); const [childrenOptions, setChildrenOptions] = useState([]); const { Option } = Select; const children = []; useEffect(() => { options.forEach((option) => { children.push( <> <Option key={option.value}> <Checkbox className="multi-select-checkbox" checked={selected.some((x) => x === option.value)} /> {option.value} </Option> </> ); }); setChildrenOptions(children); }, [selected]); useEffect(() => { onChangeHandle(selected); }, [selected]); useEffect(() => { setSelected([]); }, [Value]); return ( <Select style={style} maxTagCount={0} maxTagPlaceholder={maxTagPlaceholder} mode="multiple" placeholder={placeholder} showSearch value={selected} onSelect={(val) => onSelectValueMultiSelect(val, selected, setSelected, options)} onDeselect={(val) => onDeselectValueMultiSelect(val, selected, setSelected)}> {childrenOptions} </Select> ); }; export default MultiSelect;Si el Value se calcula en función de lo selected , entonces este useEffect() es el problema:
useEffect(() => { setSelected([]); }, [Value]); Como dijiste, causará un bucle infinito a medida que la selected cambie una y otra vez, lo que hará que el Value también cambie y el componente siga volviendo a renderizarse.
Otro lugar para buscar errores es en las devoluciones de llamada del componente <Select> con onSelect y onDeselect . No es una buena idea pasar setSelected como parámetro en la mayoría de las circunstancias porque useState hook tiene efectos secundarios . No proporciona el código completo aquí, pero creo que es probable que esto también provoque un cambio de estado inestable en su componente y provoque la nueva representación.
Además, tiene 2 useEffect() , ambos tienen [selected] como dependencia, por lo que cuando se selected cambios, también se duplicará la representación en el componente. Sin embargo, esta no es la causa de su problema principal.
La solución podría estar usando solo 1 useEffect() de la siguiente manera:
Paso 1. Con respecto a la devolución de llamada del componente <Select> :
onSelect={handleSelect} onDeselect={handleDeselect} const handleSelect = (val) => { // think about removing setSelected onSelectValueMultiSelect(val, selected, setSelected, options); // move this here onChangeHandle(selected); // reset selected here if wanted setSelected([]); } const handleDeselect = (val) => { // think about removing setSelected onDeselectValueMultiSelect(val, selected, setSelected, options); // move this here onChangeHandle(selected); // reset selected here if wanted setSelected([]); } Paso 2. Refactoriza tu useEffect() , usando solo 1 en lugar de 3:
useEffect(() => { options.forEach(...); setChildrenOptions(children); }, [selected]);Este no es el código más limpio, pero puede ser la dirección correcta para resolver su problema muy particular sin saber mucho sobre el resto del código.