获取类型错误：无法读取 null 的属性'id'(使用 redux)

Question

所以我有以下方法，它接受一个对象'x'。"x"对象具有一个名为"id"的属性。我可以在第4行记录 id，但不能在第5行中记录。

onOpenDeleteServiceModal=(x)=> {
this.props.setReduxShowDeleteServiceModal(true);
this.props.setReduxTargetedService(x); //save the object to reducer (using mapDispatchToProps)
console.log(x.id); //works fine
console.log(this.props.getReduxTargetedService.id); //error here
}

在第3行中，我将对象调度到我的化简器并将其保存在那里(使用 redux(，然后在第 5行中，我尝试从化简器记录对象 id，但我得到"类型错误：无法读取 null 的属性 'id' '

mapStateToProps

const mapStateToProps = (state) => ({
getReduxTargetedService: state.servicesState.targetedService,
})

mapDispatchToProps

const mapDispatchToProps = dispatch => ({
setReduxTargetedService: (x) =>
dispatch({ type: 'SET_TARGETED_SERVICE', x}),
})

服务减速机

const INITIAL_STATE = {
targetedService: null,
};

function servicesReducer(state = INITIAL_STATE, action) {
switch(action.type) {
case 'SET_TARGETED_SERVICE': return { 
...state,
targetedService: action.x
}

default:
return state;
}
}

Answer 1

我认为这里有两个误解。

1 - Redux 存储以异步方式更新，这意味着在调度操作后立即调用this.props.getReduxTargetedService.id将不起作用。

2 - 这不是 react + redux 的工作方式。每当调度操作并更新存储时，只有在重新呈现组件后才能看到更新的值。发生这种情况是因为组件收到某些 props 已更新的通知。这也适用于您如何使用setState更新组件状态，例如。

在您的情况下，您可以在componentDidUpdate生命周期方法中检查this.props.getReduxTargetedService.id值。您应该能够看到新值

这是反应生命周期的样子：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

在这里，您可以更深入地了解 redux https://css-tricks.com/learning-react-redux/

Answer 2

getReduxTargetedService似乎是一种方法，因此您需要这样调用它，即this.props.getReduxTargetedService().id

Answer 3

我找到了一篇文章，帮助我解决了"无法读取属性..."使用 Redux 时出现问题：

">不要从 Redux 返回 Null..."

就我而言，我只是默认返回一个空字符串而不是null，问题已解决。