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 行中，将对象分发到我的reducer并将其保存（使用redux），然后在 5 行中，我尝试记录来自reducer的对象id ，但出现'TypeError：无法读取null'

的属性'id'

mapStateToProps

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

mapDispatchToProps

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

servicesReducer

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

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

Answer 2

我认为这里有两种误解。

1-redux存储是异步更新的，这意味着在分派操作后立即调用this.props.getReduxTargetedService.id无效。

2-这不是反应+还原的工作方式。每当您分派操作并更新商店时，只有在重新呈现组件后，您才会看到更新后的值。发生这种情况是因为通知组件某些道具已更新。例如，这也取决于您如何使用setState更新组件状态。

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

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

在这里，您对redux https://css-tricks.com/learning-react-redux/

有更深入的了解

Answer 3

我发现一个article可以帮助我在使用Redux时遇到“无法读取属性...”问题：

“ 不要从Redux返回空值 ...”

在我的情况下，我只返回了一个空字符串作为默认值，而不是 null ，此问题已得到解决。

收到TypeError：无法读取null的属性“ id”（使用Redux）

3 个答案: