Context devuelve un valor nulo mientras que useEffect devuelve un objeto con propiedades.

19 Jun, 2023 Programación 0

A continuación se muestra un componente que debería usar user.id como clave de partición del contexto de React, sin embargo, al crear una nueva tarea, devuelve un error que indica que user/user.id no está definido.

Por favor revise el siguiente código:

import React, {FC, SetStateAction, useEffect, useRef, useState} from 'react';
import {Text, View} from 'react-native';
import TButton from '../../components/button';
import Input from '../../components/input';
import {useAuth} from '../../lib/realmProvider';
import {useRealm} from '../../lib/syncProvider';
import {ITarget} from '../../lib/taskInterface';
import {Target} from '../../realm/taskSchema';
import {ObjectId} from 'bson';

const CreateTaskScreen: FC = () => {
  const [target, setTarge] = useState<Partial<ITarget>>({
    _id: '',
    _partition: user?.id!,

description: '',
status: false,
createAt: new Date(Date.now()).toString(),
updateAt: '',
});

  const {user} = useAuth();
  const realm = useRealm();

  const targetHandler = () => {
    try {
      realm.write(() => {
        realm.create<Target>('Targets', {
          id: new ObjectId(),
          _partition: target.partition,
          description: target.description,
          status: target.status,
          createAt: target.createAt,
          updateAt: target.updateAt,
        });
      });
    } catch (err) {
      console.log(err);
      throw err;
    }
  };

    const testHandler = () => {
    console.log(user);
  };

  const descriptionOnChange = (e: {nativeEvent: {text: SetStateAction}}) => {
    let value = e.nativeEvent.text;
    setTarge({description: value});
  };

    useEffect(() => {
    console.log(<code>desde create target ${user}</code>);
  }, [user]);

  return (
    <View>
      <Text>Crea una nueva tarea</Text>
      <Input
        placeholder={'Descripción del objetivo'}
        onChange={descriptionOnChange}
        value={target.description}
        multiline={true}
      />
      <TButton title={'Agregar objetivo'} onPress={targetHandler} />
      <TButton title={'Botón de prueba'} onPress={testHandler} />
    </View>
  );
};

export default CreateTaskScreen;

Cuando el componente se renderiza, useEffect devuelve [object Object]. Mientras que testHandler devuelve {}, que está vacío.

Realmente no entiendo qué podría estar haciendo mal con el contexto de React.

davy.ai

June 19, 2023 at 12:35 am

El problema con el código es que user solo está definido después de que el componente se monte, pero el estado inicial de target usa user?.id como clave de partición. Esto significa que cuando el componente se renderiza por primera vez, target._partition será undefined, lo que causa el error al tratar de crear una nueva tarea.

Para solucionarlo, puedes actualizar el estado inicial de target para que use una cadena vacía como clave de partición, y luego actualizarlo con la clave de partición real después de que se monte el componente:

const CreateTaskScreen: FC = () => {
  const [target, setTarget] = useState<><itarget>>({
    _id: '',
    _partition: '', // usa cadena vacía como clave de partición inicial
    description: '',
    status: false,
    createAt: new Date(Date.now()).toString(),
    updateAt: '',
  });
  const {user} = useAuth();
  const realm = useRealm();

  useEffect(() => {
    // actualiza target con la clave de partición después de que el componente se monte
    if (user) {
      setTarget((prev) => ({...prev, _partition: user.id}));
    }
  }, [user]);

  // resto del código...
};

Con este cambio, target._partition se actualizará con el valor correcto después de que el componente se monte, lo que te permitirá crear una nueva tarea sin errores.

Answer

davy.ai

June 19, 2023 at 12:35 am
El problema con el código es que user solo está definido después de que el componente se monte, pero el estado inicial de target usa user?.id como clave de partición. Esto significa que cuando el componente se renderiza por primera vez, target._partition será undefined, lo que causa el error al tratar de crear una nueva tarea.

Para solucionarlo, puedes actualizar el estado inicial de target para que use una cadena vacía como clave de partición, y luego actualizarlo con la clave de partición real después de que se monte el componente:
```
const CreateTaskScreen: FC = () => {
  const [target, setTarget] = useState<><itarget>>({
    _id: '',
    _partition: '', // usa cadena vacía como clave de partición inicial
    description: '',
    status: false,
    createAt: new Date(Date.now()).toString(),
    updateAt: '',
  });
  const {user} = useAuth();
  const realm = useRealm();

  useEffect(() => {
    // actualiza target con la clave de partición después de que el componente se monte
    if (user) {
      setTarget((prev) => ({...prev, _partition: user.id}));
    }
  }, [user]);

  // resto del código...
};
```
Con este cambio, target._partition se actualizará con el valor correcto después de que el componente se monte, lo que te permitirá crear una nueva tarea sin errores.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Context devuelve un valor nulo mientras que useEffect devuelve un objeto con propiedades.

Answer

davy.ai