从另一个组件返回到组件时，数据会发生变化

Question

您好（对不起标题，我无法想出任何其他内容）！

我正在使用Redux来获取我的数据：

componentDidMount() {
  this.props.fetchData('http://localhost:3001/locks')
}

// Stuff between
    const mapStateToProps = state => {
      return {
        doors: state.doors
      }
    }

当我在console.log console.log(doors)时，我看到了这个：

哪个好极了！这是我想要的方式，但如果我导航到/userstolock然后回到/（我之前的位置），我就会收到此错误;这一行TypeError: doors.map is not a function：

const doors = this.props.doors.data || []
console.log(doors)
const doorsItems = doors.map(door => <DoorsItem door={door} />) // This line!!

我的输出也改变了：

所以我想知道为什么会出现这个问题。如果我解释得很糟糕，我很抱歉，但我不明白这个问题我真的无法解释。如果有人需要更多代码，请告诉我们！

非常感谢。

修改

我收到了评论，建议我删除.data。我试过了，但这没有给我带来好运。这是它的输出：

我被要求添加减速器，这里是：

const initialState = {
  data: []
}

export function doorsHasErrored(state = false, action) {
  switch (action.type) {
    case 'DOORS_HAS_ERRORED':
      return action.hasErrored

    default:
      return state
  }
}

export function doorsIsLoading(state = false, action) {
  switch (action.type) {
    case 'DOORS_IS_LOADING':
      return action.isLoading

    default:
      return state
  }
}

export function doors(state = initialState, action) {
  switch (action.type) {
    case 'DOORS_FETCH_DATA_SUCCESS':
      return action.doors

    default:
      return state
  }
}

Answer 1

<强>更新 对不起，如果没有完整的代码就很难调试，但看起来你的Reducer可能会覆盖你的状态。

通常，您将修改状态对象，而不是将其设置为操作，如下所示：

export function doors(state = initialState, action) {
  switch (action.type) {
    case 'DOORS_FETCH_DATA_SUCCESS':
      return {
        ..state,
        doors: action.doors
      }

    default:
      return state
  }
}

我认为当你的其他减速机正在运行时，它们可能会覆盖整个状态。您可能必须修改所有缩减器以避免覆盖。

查看redux reducer docs典型的减速机使用情况。

Object.assign({}, state, {doors: action.doors})

等同于

{
  ...state,
  doors: action.doors
}

-

您的初始状态似乎也可能缺失doors？ 也许是这样的：

const initialState = {
  doors: {
    data: []
  }
}