如何使用 map() 函数在 React with Redux Saga 中显示元素列表

Question

我正在尝试将 React 与 Redux Saga 结合使用。

我使用的代码可以在这里找到：

https://codesandbox.io/s/redux-toolkit-saga-stoic-euler-cjhgx-forked-udh3r?file=/src/App.js

当我使用下面url的代码时：

https://jsonplaceholder.typicode.com/todos/1

代码对我有用

但我想用这个 url

https://jsonplaceholder.typicode.com/todos

这样我可以获得所有值的列表

我使用此代码显示 user/todo 列表中的信息

{user.title}

对我有用

但我无法获取要在应用程序中显示的所有值的列表。

我尝试使用下面的代码

{user.map((parameter) => <p>1</p>)}

它说 map() 不是函数。

我该如何解决这个问题？

Answer 1

您通过 setUser({...data}) 将 user 设置为对象，Array.prototype.map 只能用于数组。

由于responsedata是一个数组，可以直接设置为setUser(data)

user.js

 export function* handleGetUser(action) {
      try {
        const response = yield call(requestGetUser);
        const { data } = response; //data is an Array
        console.log('data',data);
        yield put(setUser(data));
      } catch (error) {
        console.log(error);
      }
    }

userSlice.js

const userSlice = createSlice({
  name: "user",
  initialState: {},
  reducers: {
    getUser() {},
    setUser(state, action) {
      const userData = action.payload; //setting userData (Array) as data
      return { ...state, data:userData };
    }
  }
});

应用程序

return (
    <div className="App">
      {user.data.length}
      {user.data?.map((obj) => <h1 key = {obj.id}>{obj.id}.{obj.title}</h1>)}
    </div>
  );

如何使用 map() 函数在 React with Redux Saga 中显示元素列表

How to use a map() function to show a list of elements in React with Redux Saga

reactjs

redux-saga