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

Posted 2023-02-22

【中文标题】访问道具时未获得正确的数据

【英文标题】：Not getting the right data when accessing props

【发布时间】：2021-10-18 16:48:57

【问题描述】：

在我的 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 中访问的值。

【问题讨论】：

这个位authAccount=authAccount不应该工作根本，因为authAccount在那个范围内是undefined（它只存在作为您的状态对象的属性）。请发布一个生成该错误消息的最小的、可重现的示例。

是的，不知道他怎么不做this.state.authAccount就可以访问任何东西。

@DanZuzevich 我正在使用 this.state.authAccount

【参考方案1】：

在你的第一个组件中，只需正确传递状态，而不是组件使用路由器包附带的渲染方法。

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

【讨论】：

@abc abc 我这会帮助你