Tengo un gancho useEffect que hará una solicitud axios get api y la almacenará en un useState
const [apiResponse, setApiResponse] = useState([]); useEffect(() => { ... // inside of .then() setApiResponse(data.data.payload); .... },[]);apiResponse tiene una matriz de objetos
[ { userName: "user Name", description: "<p>lorem ipsum lorem ipsum lorem ipsum</p>", selected: "Yes", } ]Reaccionar Borrador Wysiwyg
const blocksFromHTML = convertFromHTML(`${apiResponse.description}`); const state = ContentState.createFromBlockArray( blocksFromHTML.contentBlocks, blocksFromHTML.entityMap ); const [editorState, setEditorState] = useState(() => EditorState.createWithContent(state) ); const onEditorStateChange = (editorState) => { setEditorState(editorState); return draftToHtml(convertToRaw(editorState.getCurrentContent())); }; .... return ( .... <Editor toolbarClassName="toolbarClassName" wrapperClassName="ChannelDesscription" editorClassName="editorClassName" editorState={editorState} defaultEditorState={editorState} onEditorStateChange={onEditorStateChange} /> ... )Me estoy imprimiendo indefinido en el Editor.
En el registro de la consola, estoy indefinido en el primer renderizado y luego el valor se imprime en la consola... pero dentro del editor permanece indefinido.
console.log(apiResponse.description)¿Qué error estoy cometiendo aquí?
Gracias.
No puedo verificar que este sea el problema basado en el código, pero supongo que el problema es cómo funciona el estado inicial con useState
Firma
const [state, setState] = useState(initialState) Aquí initialState solo se usa para inicializar el estado: los cambios en initialState en renderizaciones posteriores no afectan el valor de state .
primer renderizado
const [state, setState] = useState(0) console.log(state) // 0Segundo render
const [state, setState] = useState(1) console.log(state) // 0 Para cambiar el estado después del primer procesamiento, debe llamar a setState .
tercer renderizado
const [state, setState] = useState(1) console.log(state) // 0 setState(3)Cuarto render
const [state, setState] = useState(1) console.log(state) // 3 Mi sospecha es que, en su caso, editorState se inicializa antes de que se complete la solicitud de los datos, lo que significa que se inicializa con un valor indefinido. Debe usar algún otro mecanismo que initialValue para proporcionar el valor de la respuesta al estado si no puede esperar a que se resuelva la respuesta antes de inicializar el estado del editor.
Puede probar si este es el problema configurando el estado del editor en useEffect donde almacena la respuesta.
useEffect(() => { ... // inside of .then() setApiResponse(data.data.payload); const { contentBlocks, entityMap } = convertFromHTML(apiResponse.description); setEditorState( EditorState.createWithContent( ContentState.createFromBlockArray( contentBlocks, entityMap ) ) ) .... },[]);En su implementación final, asegúrese de no anular el estado del editor por accidente después de que el usuario ya haya realizado cambios.