Estoy trabajando esencialmente en un sitio web de encuestas. Uno de los componentes se llama BiSlider que es solo un interruptor. Estos conmutadores tienen un valor predeterminado que he definido en una lista de preguntas (es decir, "sí" está predeterminado en un conmutador sí/no), para lograr esto llamo a la función principal onChange en el montaje del componente con useEffect() . Sin embargo, esto solo envía un objeto vacío al padre {} . Sin embargo, cuando cambia el interruptor, funciona perfectamente: envía un objeto que contiene { questionTitle: { answer: "yes", valid: true } } . ¿Podría tener una mano para averiguar por qué no puede enviar un objeto de respuesta?

Aquí está el componente biSlider:

 export const BiSlider = ({ choices, question, onChange, auto }) => { const [ selected, setSelected, selectedRef ] = useState(auto) useEffect(() => { onChange({ [question]: { answer: choices[selectedRef.current], valid: true } }) }, []) const onSwitch = () => { setSelected(i => ( i === 0 ) ? 1 : 0) onChange( { [question]: { answer: choices[selectedRef.current], valid: true } } ) } return ( <div className={"bislider" + (selected ? " on" : " off")}> <div className="slider"></div> <button onClick={() => onSwitch()} className="bislider-button">{ choices[1] }</button> <button onClick={() => onSwitch()} className="bislider-button">{ choices[0] }</button> </div> ) }

El accesorio de question sería simplemente el título de la pregunta en una cadena, los accesorios de choices serían una lista de opciones (es decir ["yes", "no"] ) y el accesorio auto es el índice del valor predeterminado (es decir, 0 para no). ).

Espero haber explicado esto bien, si necesita más código, por favor solo avíseme.