Reactjs 如何修复无法使用'；在'；操作员搜索'；1'；在未定义的中反应？

我想学习redux和redux工具包，但我遇到了一个问题。我不知道怎么修

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

在我的示例中，这两项：

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;

从'react'导入{useState}；
从“../store/usersSlice”导入{addUser}；
从'react redux'导入{useDispatch}；
常数形式=（）=>{
const dispatch=usedpatch（）；
const[input，setInput]=useState（“”）；
调度（添加用户）({
id:'1'，
用户名：输入
}));
返回(
setInput（e.target.value）}/>
)
};
导出默认表单；

问题：初始状态 上面的语句显示了由

todoAdapter

创建的初始状态。它是一个具有数组属性

ids

和对象属性

entities

的对象。它看起来像：

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

在

todapter

上调用

addOne

正在

entities

属性中搜索键

1

切片的初始状态为空对象

{}

。它没有

id

或

实体

。当

addOne

函数在

state.entities

中搜索id

1

时，会出现错误“无法使用'in'运算符在未定义中搜索'1'，因为

state.entities

是

未定义的

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

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

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