Question

使用基于React的应用程序和Redux for state，我有一个组件应该在加载后从后端加载数据列表。

我有组件加载，映射了状态和操作。我在这里有组件的主要数据调用：

componentWillMount(){
    this.props.loadTasks(this.props.user);
}

在这里触发动作功能：

export const loadTaskList = (user) => {
  return (dispatch) => {
    fetch(`http://localhost:3201/tasks/${user._id}`)
        .then(res => res.json())
        .then(tasks => {
          console.dir(tasks);
          return({type: LOAD_TASKS, payload: tasks});
        });
  }
}

将被发送到reducer，并像这样整合到商店中：

export default (state=initState, {type, payload}) => {
  switch (type) {
    case LOAD_TASKS:
      console.log(`Payload of tasks: ${payload}`);
      return{...state, tasks: payload};
    default:
      return state;
  }
}

问题是为什么这不会进入我的状态，因此在我的组件中？

编辑：为了清楚起见，我的mapState和mapActions对象：

let mapState = (state) => ({
  tasks: state.tasklist,
  user: state.user
});

let mapActions = (dispatch) => ({
  loadTasks: loadTaskList, //taskList Reducer
  selectTask: selectTask, //ActiveTask Reducer
  deleteTask: deleteTask, //TaskList Reducer
  newTask: newTask //activeTask Reducer
});

Answer 1

因为您没有派遣action，请使用此：

dispatch({type: LOAD_TASKS, payload: tasks});

而不是：

return({type: LOAD_TASKS, payload: tasks});

回归不会做任何事情。

Answer 2

在安装发生之前调用UNSAFE_componentWillMount（）。它在render（）之前调用，因此在此方法中同步调用setState（）不会触发额外的渲染。通常，我们建议使用构造函数（）代替初始化状态。

我建议使用相同的方法或在componentDidMount（）{}中调用loadTasks（）而不是componentWillMount（）

React / Redux ComponentWillMount未加载数据

2 个答案: