React/Redux 带有从 Rails API 获取的钩子

Question

我正在尝试将 redux 和 hooks 与我的 rails / react 应用程序一起使用，并且运行遇到了一个奇怪的问题。当我第一次在控制台记录正在获取的列表对象时，它们在控制台中显示正常并正确呈现 See this picture

这是我的 Lists.js

代码

 export default function Lists() {
  const lists = useSelector(state => state);
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchLists())
  }, [])

console.log(lists)

      return (
      <div>
        <h2>Your Lists</h2>
        {lists && lists.map(list => {
          return <List list={list} key={list.id}/>
        })}
      </div>
      )
}

然后，只要我写其他东西或刷新页面，我就会收到此错误消息，即未定义地图 - 尽管清楚地列出了应该能够映射的对象数组。 See this picture

这是我的减速器：

import { GET_LISTS } from "../constants"

export default function listReducer(state = {lists: []}, action){
    switch(action.type) {
        case GET_LISTS:
            return {
                ...state,
                lists: action.payload
            }

        default: 
            return state
    }
}

我的行动：

export function fetchLists(){
    return (dispatch) => {
        fetch("http://localhost:3000/api/v1/lists")
          .then((res) => res.json())
          .then((lists) => dispatch({ type: GET_LISTS, payload: lists }));

} }

所以基本上，当我用 .map 注释掉代码时，列表会正确地获得 console.logged，然后我在其中注释它可以很好地呈现列表，并且当我刷新页面时，我会得到这个错误.非常混乱，我不知道还能尝试什么。

到目前为止我已经尝试过：

添加 fetchLists 作为对 useEffect 的依赖
仅在我的操作中调度并仅调用 useEffect 中的函数
将整个获取请求放在 useEffect 中而不是使用动作创建器

基本上无论我尝试什么我仍然得到

Lists.js:32 Uncaught TypeError: lists.map is not a function

刷新时出错。

当我的应用程序中没有调试器时，它也会让我进入调试器。有谁知道我错过了什么？

Answer 1

发生这种情况是因为您尝试 map() 对象而不是数组。请在此处查看问题的简短示例：

设置好后，您可能会使用初始值作为数组。这就是它起作用的原因 []。但是当你更新变量时 lists 变成一个对象 {[]}，这是不可映射的。
您可以检查 lists 是否不仅存在，而且是您想要的类型。以下是检查过程的一些答案：How do you check if a variable is an array in JavaScript.

这里是沙箱，用于重现您遇到的错误并使用 DOM 的条件渲染无一例外地处理它：
Sandbox
用于检查类型是否为 useEffect():

数组的示例代码

useEffect(() => {
  console.log("is array type? : ", Array.isArray(lists));
}, [lists]);

React/Redux 带有从 Rails API 获取的钩子

React/Redux with hooks to fetch from Rails API

ruby-on-rails

dispatch-async

redux

react-hooks

use-effect