React，Redux：无法读取未定义的属性（正在读取...）

Question

我正在将数据（对象）提取到 redux 状态并将该对象放入反应道具中。

如果通过单击按钮检索数据，代码工作正常。但是我想在渲染组件时检索数据，但这是行不通的。相反，我收到错误 Cannot read properties of undefined (reading 'id')

这段代码确实有效，我可以在 redux-state 中看到检索到的对象（在 Chrome redux-devtool 中）：

export class Main extends Component {

 componentDidMount(){
    this.props.getQuery();
 }

 onClick = () => {
    console.log(this.props.query.query.id)
 } 

 render() {
    return (
        <div>
            <Button onClick={this.onClick}>Print id</Button>
        </div>
    )
 }
}

const mapStateToProps = state => ({
 query: state.query.query
});

export default connect(mapStateToProps, { getQuery })(Main)

但是这段代码不起作用：

export class Main extends Component {

 componentDidMount(){
    this.props.getQuery();
    console.log(this.props.query.query.id) //This line throws an error
 }

 onClick = () => {
    console.log(this.props.query.query.id)
 } 

 render() {
    return (
        <div>
            <Button onClick={this.onClick}>Print id</Button>
            <p>this.props.query.query.id</p> //This line throws an error
        </div>
    )
 }
}

const mapStateToProps = state => ({
 query: state.query.query
});

export default connect(mapStateToProps, { getQuery })(Main)

我是 React 和 redux 的新手，非常感谢任何帮助。谢谢！

Answer 1

当您访问查询时添加 optional chaining operator，如下所示：this.props.query?.id 在 mapStateToProps 中，你将 state.query.query 放在 JSX 中，你可以直接访问 id：this.props.query?.id 否则它会像你提到的那样抛出错误。

当你需要在 JSX 中使用任何变量时，你应该将它放在花括号中，例如： <li>{this.props.query?.id}</li>

Answer 2

你可以像这样使用链接运算符

<p>this.props.query?.query?.id</p> //This line throws an error

或先验证再打印

{ this.props.query && this.props.query.query &&
<p>this.props.query.query.id</p> 
}

React，Redux：无法读取未定义的属性（正在读取...）

React, Redux: Cannot read properties of undefined (reading ...)

reactjs

redux