Блог

Я работаю над проектом redux. ниже приведен мой appSlice

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

и вот мой chat.jsx

 const [message, setMessage] = useState([]);  //needed when you want to listen to a statechange in the database and fetch   useEffect(() =gt; {  const messageRef = collection(db, "channels", channelId, "messages");  onSnapshot(messageRef, (snapshot) =gt; {  setMessage(snapshot.docs.map((doc) =gt; doc.data()));  });  }, [channelId]);  

когда я пытаюсь запустить свой браузер, он выдает мне эту ошибку

Ошибка типа: Не удается прочитать свойства null (чтение «indexOf»)

указывая на мой чат.jsx, где у меня есть const MessageRef = коллекция(…)

поэтому я подозреваю, что при первоначальном рендеринге он считывает нулевое значение и таким образом нарушает мой код.

что я пробовал?

когда я изменил идентификатор канала const в приложении, чтобы он имел значение, а не значение null, это работает.

Я просто не хочу, чтобы у него было начальное значение, поэтому оно было равно нулю, поэтому, когда пользователь нажимает на идентификатор, он заполняет его.

поэтому мой вопрос в том, как я могу справиться с этой ошибкой, не изменяя начальное состояние моего channelId

Я считаю, что вам нужна загрузка, чтобы дождаться завершения вызова базы данных и получения значения. Поэтому я бы просто переместил вызов базы данных в свой собственный крюк и вернул три вещи data, isLoading, error . Затем в вашем chat.jsx вы можете получить доступ к данным, позвонив по телефону:

const [yourData, isLoading, error] = useYourCustomHook()

Поскольку загрузка есть, вы можете вернуть индикатор загрузки после запуска вызова базы данных, а затем обновить свое состояние useEffect после поступления данных.