javascript - 访问道具时未获得正确的数据

Question

在我的 App.js 中，我有以下内容：

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            authAccount: {
                email: "",
                passcode: ""
            },
            
        };
    }

    
    
    render(){
        return(
            <Router>
        
                <Switch>
                    <Route path="/somelink/abc" exact component={SomeClass} authAccount={this.state.authAccount} />
                </Switch>
            </Router>
        );
    
    }

}


export default App;

我有另一个 React 组件：

class SomeClass extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            item:[
                {
                    name: "",
                    material: "",
                },
            ],
        };
    }


    someMethod = () =>{
        console.log(this.props.authAccount.email);
        //I am always getting the object {email: '[e-mail]', passcode: 'somepassword123'}
        //even though I only want the email value, which is what I am accessing.

    }
    

}
export default SomeClass;

App.js 是父类。

我总是得到对象 {email: '[e-mail]', passcode: 'somepassword123'} 即使我只想要电子邮件值，这是我试图在 someClass 组件中的 someMethod 中访问的值。

标签： javascriptreactjsreact-reduxreact-routerreact-hooks

Answer 1

在您的第一个组件中，只需正确传递状态，而不是组件使用 Router 包附带的 render 方法。

  <Router>     
     <Switch>
       <Route 
         path="/somelink/abc" 
         exact 
         render={(props)=>(
            <SomeClass {...props} authAccount= {this.state.authAccount}/>
             )
            }  
          />
     </Switch>
 </Router>