¿Cómo puedo solucionar este error TypeError: Cannot read properties of null (reading ‘indexOf’) en mi aplicación de Redux?

14 Jul, 2023 Programación 0

Estoy trabajando en un proyecto de redux. A continuación se encuentra mi appSlice

export const appSlice = createSlice({
  name: "app",
  initialState: {
    channelId: null,
    channelName: null,
  },
  reducers: {
    setChannelInfo: (state, action) => {
      state.channelId = action.payload.channelId;
      state.channelName = action.payload.channelName;
    },
  },
});

Y aquí está mi chat.jsx

const [message, setMessage] = useState([]);
  //necesario cuando se quiere escuchar un cambio de estado en la base de datos y recuperar

  useEffect(() => {
    const messageRef = collection(db, "channels", channelId, "messages");
    onSnapshot(messageRef, (snapshot) => {
      setMessage(snapshot.docs.map((doc) => doc.data()));
    });
  }, [channelId]);

Cuando intento ejecutar mi navegador, me muestra el siguiente error:

TypeError: No se pueden leer las propiedades de null (leyendo ‘indexOf’)

señalando a mi chat.jsx donde tengo const messageRef = collection(…)

Entonces sospecho que en la renderización inicial se está leyendo un valor nulo y está rompiendo mi código.

¿Qué he intentado?

Cuando cambié la const channelId en appSlice para que tenga un valor en lugar de null, funciona.

Simplemente no quiero que tenga un valor inicial, por eso estaba en null para que cuando el usuario haga clic en el id, se rellene.

Entonces, mi pregunta es, ¿cómo puedo manejar este error sin tener que cambiar el estado inicial de mi channelId?

davy.ai

July 14, 2023 at 1:38 pm

Para manejar el error sin cambiar el estado inicial de channelId, puedes agregar una condición para verificar si channelId no es null antes de crear messageRef en tu archivo chat.jsx. Aquí tienes un fragmento de código actualizado:

const [message, setMessage] = useState([]);
  // necesario cuando quieres escuchar un cambio de estado en la base de datos y obtener

  useEffect(() => {
    if(channelId !== null){ // verificar si channelId no es null
      const messageRef = collection(db, "channels", channelId, "messages");
      onSnapshot(messageRef, (snapshot) => {
        setMessage(snapshot.docs.map((doc) => doc.data()));
      });
    }
  }, [channelId]);

Con esta condición, messageRef solo se creará y la función onSnapshot solo se llamará cuando channelId no sea null. Esto debería evitar que ocurra el error en la representación inicial.

Answer

davy.ai

July 14, 2023 at 1:38 pm
Para manejar el error sin cambiar el estado inicial de channelId, puedes agregar una condición para verificar si channelId no es null antes de crear messageRef en tu archivo chat.jsx. Aquí tienes un fragmento de código actualizado:
```
const [message, setMessage] = useState([]);
  // necesario cuando quieres escuchar un cambio de estado en la base de datos y obtener

  useEffect(() => {
    if(channelId !== null){ // verificar si channelId no es null
      const messageRef = collection(db, "channels", channelId, "messages");
      onSnapshot(messageRef, (snapshot) => {
        setMessage(snapshot.docs.map((doc) => doc.data()));
      });
    }
  }, [channelId]);
```
Con esta condición, messageRef solo se creará y la función onSnapshot solo se llamará cuando channelId no sea null. Esto debería evitar que ocurra el error en la representación inicial.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo solucionar este error TypeError: Cannot read properties of null (reading ‘indexOf’) en mi aplicación de Redux?

Answer

davy.ai