Estoy tratando de configurar los datos del componente secundario al estado del componente principal, a su vez, esos datos se asignarán al campo de texto de entrada. Y luego quiero hacer clic automáticamente en el botón para enviar los datos del campo de texto de entrada a la función handleBtnSubmit() .
Pero cuando lo hice, este componente secundario se está renderizando indefinidamente. ¿Puede alguien por favor ayudar a resolver este tipo de situación?
Padre
const [responses, setResponses] = useState([]); const [currentMessage, setCurrentMessage] = useState(''); const submitAction = () => { setResponses((responses) => [...responses, message]); handleMessageSubmit(message.text); setCurrentMessage(''); }; const handleBtnSubmit = () => { submitAction(); }; <Messages messages={responses} parentData={{ currentMessage, setCurrentMessage, btnRef, handleBtnSubmit }} /> <div className='typing-area'> <div className='input-field'> <input type='text' placeholder='Type something here' required value={currentMessage} onChange={handleMessageChange} onKeyDown={handleSubmit} /> </div> <button onClick={handleBtnSubmit} ref={btnRef}> <img src={sendButton} alt='Send Button' /> </button> </div>Niño
const setMessage = (option) => { parentData.setCurrentMessage(option); // parentData.btnRef.current.click(); // console.log(parentData.currentMessage); }; useEffect(() => { console.log(setCurrentMessage.currentMessage); // parentData.btnRef.current.click(); //tried this // parentData.handleBtnSubmit(); //also also tried directly calling handleBtnSubmit(); //both are causing indefinite rerender }, [parentData.currentMessage]); //tried this too <li className='option' key={i} onClick={() => setMessage(option)}> {option} </li>Primero, pase currentMessage como una propiedad separada, en lugar de pasarlo dentro de un objeto. Algo como:
<Messages messages={responses} currentMessage={currentMessage} parentData={{ setCurrentMessage, btnRef, handleBtnSubmit }} />; Luego intente pasar la propiedad currentMessage como una dependencia en useEffect como se muestra a continuación:
useEffect(() => { console.log(currentMessage); setCurrentMessage.btnRef.current.click(); }, [currentMessage]); // child's message state De esta manera, el código useEffect se llama solo cuando cambia el mensaje currentMessage , y no indefinidamente.
Cree otro estado que almacene el valor completo al hacer clic/enviar. Y use ese valor como una dependencia de useEffect()
const [messageText, setMessageText] = useState(''); useEffect(() => { submitBtnRef.current.click(); }, [messageText]);