javascript - React 无法读取从 Redux 状态获取的值
问题描述
有点奇怪。在我的组件中,我从“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
})
}
}
解决方案
在我的减速机的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
}
}
推荐阅读
- html - Bootstrap Navbar Collapse 保持水平
- react-native - React Native KeyboardAvoidigView 不适用于 SafeAreaView
- winforms - 将对象列表传递给主窗体
- javascript - Angular - 从根模块中的服务访问值
- c# - Console.ReadKey() 没有捕捉到某些组合 [shift+up]
- javascript - 将 jQuery 创建的元素附加到 vanilla js?
- android - 视图未填充在 gridlayout recyclerview 中
- java - While 循环意外重复 [Java]
- python - 在 Spark Python 中转换部分 RDD 行
- java - Java中的基本对话框