我如何解决 Cannot use 'in' operator to search for ‘1’ in undefined in react？

Question

我想学习 redux 和 redux 工具包，但我遇到了问题。我不知道如何解决它。

我只想在用户存储中存储任何项目。

在我的示例中，这 2 个项目：

id: '1' 用户名：输入

store.js

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './usersSlice';

const store = configureStore({
  reducer: {
    users: userReducer
  },
})

export default store;

usersSlicer.js

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'

export const todoAdapter = createEntityAdapter();
export const todoSelector = todoAdapter.getSelectors(state => state.users);

const initialState = {

}

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    addUser: todoAdapter.addOne
  }
});

export const { addUser } = usersSlice.actions
export default usersSlice.reducer

Form.js

import { useState } from 'react';
import { addUser } from '../store/usersSlice';
import { useDispatch } from 'react-redux';
const Form = () => {
  const dispatch = useDispatch();
  const [input, setInput] = useState('');

  dispatch(addUser({
    id: '1',
    username: input
  }));

  return (
    <form>
      <input type="text" onChange={e => setInput(e.target.value)}/>
    </form>
  )
};

export default Form;

Answer 1

问题：初始状态

console.log("initial", todoAdapter.getInitialState());

上面的语句显示了 todoAdapter 创建的初始状态。它是一个带有数组属性 ids 和对象属性 entities 的对象。看起来像：

initial {ids: Array(0), entities: Object}

在 todoAdapter 上调用 addOne 是在 entities 属性.

中搜索键 1

您的切片的初始状态是一个空对象 {}。它没有 ids 或 entities。 addOne 函数在 state.entities 中搜索 id 1 时，出现错误 “无法使用 'in' 运算符在未定义中搜索‘1’” 因为 state.entities 是 undefined.

解决方案

对此有一个非常简单的解决方案。您可以将切片的初始状态设置为实体适配器提供的状态。

const usersSlice = createSlice({
  name: "users",
  initialState: todoAdapter.getInitialState(),
  reducers: {
    addUser: todoAdapter.addOne
  }
});

我如何解决 Cannot use 'in' operator to search for ‘1’ in undefined in react？

how i fix Cannot use 'in' operator to search for '1' in undefined in react?

reactjs

redux

redux-toolkit

问题：初始状态

解决方案