React 无法读取从 Redux 状态获取的值答案

【问题标题】：React can't read value gotten from Redux stateReact 无法读取从 Redux 状态获取的值
【发布时间】：2021-07-09 12:06:09
【问题描述】：

有点奇怪。在我的组件中，我从“taskDetails”reducer 中获得了一个“task”对象。然后我有一个 useEffect 函数来检查 task.title 是否没有设置，然后调用动作来获取任务。

但是，当页面加载时，我收到一个错误 cannot read property 'title' of null，这很奇怪，因为当我查看我的 Redux 开发工具时，任务就在那里，它的所有数据都在其中，但无法检索。

以下是相关代码：

    const taskId = useParams<{id: string}>().id;

    const dispatch = useDispatch();
    const history = useHistory();

    const [deleting, setDeleting] = useState(false)

    const taskDetails = useSelector((state: RootStateOrAny) => state.taskDetails);
    const { loading, error, task } = taskDetails;

    const successDelete = true;

    const deleteTaskHandler = () => {

    }

    useEffect(() => {
        if(!successDelete) {
            history.push('/home/admin/tasks')
        } else {
            if(!task.title || task._id !== taskId) {
                dispatch(getTaskDetails(taskId))
            } 
        }
    },[dispatch, task, taskId, history, successDelete])

减速器

  export const taskDetailsReducer = (state = { task: {} }, action) => {
    switch(action.type) {
      case TASK_DETAILS_REQUEST:
        return { loading: true }
      case TASK_DETAILS_SUCCESS:
        return { loading: false, success: true, task: action.payload }
      case TASK_DETAILS_FAIL:
        return { loading: false, error: action.payload }
      case TASK_DETAILS_RESET:
        return { task: {} }
      default:
        return state 
    }
  }

动作

  export const getTaskDetails = id => async (dispatch) => {
    try {
      dispatch({
        type: TASK_DETAILS_REQUEST
      })

      const { data } = await axios.get(`http://localhost:5000/api/tasks/${id}`) 

      dispatch({
        type: TASK_DETAILS_SUCCESS,
        payload: data
      })

    } catch (error) {
      dispatch({
        type: TASK_DETAILS_FAIL,
        payload:
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
      })
    }
  }

【问题讨论】：

当你把taskDetails和console.log(taskDetails)打印出来，结果是什么？
@Lynx242 它说 tasks: {} 和 loading: true 这很有趣，因为 redux 开发工具有不同
看起来你的 reducer 更新了几次，但组件不知道未来的变化
@poltorin 我会将我的减速器和操作添加到问题中
知道了，在我的TASK_DETAILS_REQUEST 上我刚刚loading: false，我通过添加状态的内容来修复它...state 谢谢大家

标签： javascript reactjs redux

【解决方案1】：

在TASK_DETAILS_REQUEST 的减速器中，我只有loading: false。

我没有指定状态的原始内容，我通过添加...state来做到这一点。

   export const taskDetailsReducer = (state = { task: {} }, action) => {
    switch(action.type) {
      case TASK_DETAILS_REQUEST:
        return { ...state, loading: true }
      case TASK_DETAILS_SUCCESS:
        return { loading: false, success: true, task: action.payload }
      case TASK_DETAILS_FAIL:
        return { loading: false, error: action.payload }
      case TASK_DETAILS_RESET:
        return { task: {} }
      default:
        return state 
    }
  }

【讨论】：