我该如何解决这个错误 TypeError: Cannot read properties of null (reading 'indexOf') in my redux application

Posted 2023-02-19

【中文标题】我该如何解决这个错误 TypeError: Cannot read properties of null (reading \'indexOf\') in my redux application

【英文标题】：how can i solve this error TypeError: Cannot read properties of null (reading 'indexOf') in my redux application我该如何解决这个错误 TypeError: Cannot read properties of null (reading 'indexOf') in my redux application

【发布时间】：2022-01-12 20:14:43

【问题描述】：

我正在做一个 redux 项目。 下面是我的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;
    ,
  ,
);

这是我的chat.jsx

const [message, setMessage] = useState([]);
  //needed when you want to listen to a statechange in the database and fetch

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

当我尝试运行我的浏览器时，它给了我这个错误

TypeError: 无法读取 null 的属性（读取 'indexOf'）

指向我的 chat.jsx，我有 const messageRef = collection(...)

所以我怀疑在初始渲染时它正在读取空值，因此破坏了我的代码。

我尝试了什么？

当我将 appSlice 中的 const channelId 更改为具有值而不是 null 时，它可以工作。

我只是不希望它有一个初始值，这就是它为 null 的原因，以便当用户现在单击 id 时，它会填充它。

所以我的问题是如何处理此错误而无需更改我的 channelId 的初始状态

【参考方案1】：

我相信您需要加载才能等到数据库调用完成并且您有一个值。因此，我只需将数据库调用移动到它自己的钩子中并返回三个东西data, isLoading, error。然后在你的 chat.jsx 中你可以通过调用钩子来访问数据：

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

由于加载在那里，您可以在数据库调用运行后返回加载指示器，然后在数据到达后更新useEffect 中的状态。