无法访问通过React路由器传递的数据

Question

我正在尝试将我从后端收到的数据传递到前端的另一页。我正在使用react-router-dom和用将我的数据从product.js页面传递给result.js前端上的页面。不过，我一直遇到此错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'state')

并且代码总是在这条代码上破裂，它不会超越它（此代码存在于result.js页面代码下方）：（

<div className="score">hAPPi SCORE: <br/> <span>{this.props.location.state.data.data.score}</span></div>

product 。该代码的作用基本上是在用户的输入中（通过语音），将成绩单发送到后端，后端将发出反馈，分数等，然后这些数据将返回此> product.js页面。从那里，我想将这些数据传递到result.js页面。

class Product extends Component {
   
    handleRedirect() {
        // Redirect user to the results page
        console.log(this.state.data)
        console.log(this.state.data.data.feedback)

        this.props.history.push("/results", {data: this.state.data}); // Sending backend data to frontend

    }

            

}



export default withRouter(Product);

（result.js页面）这是应接收第一页的数据并在页面上显示数据的代码：

class ResultPage extends Component {
    



render() {
    console.log(this.state.data) // trying to console log it, but it won't work
    return (
        
        <div className="Container">
            <div className="result-section">
                <div className="score">hAPPi SCORE: <br/> <span>{this.props.location.state.data.data.score}</span></div>
                <div className="scale-container">
                    <Scale scale-id="scr-scale" style="score-scale" score={this.props.location.state.data.data.score}/>

                </div>
            </div>

            <div className="analysis-section">
                <div className="analysis-container">
                    <div className="analysis-title">
                        In-Depth Analysis
                    </div>
                    <div className="keywords-container">
                        <div className="section-titles">
                            Keywords
                        </div>
                        <div>
                            <ul>
                                {this.props.location.state.data.data.keywords.map(kw =>
                                    <h3>{kw}</h3>
                                )}
                            </ul>
                        </div>
                    </div>

                    <div className="entity-container">
                        <div className="section-titles">
                            Entities
                        </div>
                        <div>
                            <ul>
                                {this.props.location.state.data.data.entities.map(en =>
                                    <h3>{en}</h3>
                                )}
                            </ul>
                        </div>
                    </div>

                    <div>
                        <h1>Result</h1>
                        <div>
                            {this.props.location.state.data.data.feedback}
                        </div>
                    </div>
                    
                    <hr></hr>
                </div>
                
            </div>
        </div> 
    
    );
}

}



export default ResultPage;

每当我使用this.props.location.state.state时，我都会遇到错误。数据。（某物），但是当我用硬编码的数字/字符串替换时，该页面正常工作。我不确定我在将数据从product.js页面传递到result.js页面方面做错了什么，但是我很确定我在使用this.props.location ...从结果访问数据时做错了什么。

一些帮助将不胜感激！

Answer 1

您尚未显示resultpage组件的呈现方式。它可以通过几种方式接收位置对象作为道具。

1. 由Route组件直接渲染。

   示例：

   •  ＆lt; route path =“ /result”组件= {resultpage} /＆gt;
      

   •  ＆lt;路由
       路径=“/结果”
       Render = {RouteProps =＆gt; ＆lt; resultpage {... routeprops} /＆gt;}
     /＆gt;
     
      

2. 用使用高阶组件。

   示例：

     import {withRouter}来自'react-router-dom';
   
   类结果页扩展了组件{
     ...
   }
   
   导出默认用withRouter（resultpage）;
    

随着路由道具传递/注入，resultpage组件现在应该能够访问this.props.location.state.state？.data 值在路由状态传递的值产品页面。