Question

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

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

相关代码如下：

    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
      })
    }
  }

Answer 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 
    }
  }

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

1 个答案: