react.js使用鏈接傳遞值

Question

這是我的Profile課：

class Profile extends React.Component {
     state={email:'',userName:'',userID:''};
     render() {
              return(
     <div>
     ...
            <Link to={{pathname:"/edit",state:this.props.state}}>
     ...
     </div>

    );
}
}
export default Profile;

這是我的ProfileEdit類：

class ProfileEdit extends React.Component {
state={email:'',userName:'',userID:''};
render() {
    return(
        <div>
        ...
                        <TextField valueOfEmail={this.state.userID}/>
        ...
        </div>
    );
}
}
export default ProfileEdit;

這是我的TextField類：

class TextField extends React.Component {
render() {
    const {valueOfEmail}=this.props;
    return (
        <div>
            <div className="form-label-group">
                <input type="text" id="inputEmail" value={valueOfEmail} className="form-control" placeholder="Name" required autoFocus/>
                <label htmlFor="inputEmail">Enter Name</label>
            </div>
        </div>
    );
}
}
export default TextField;

它有時會給我錯誤，有時卻不會，但是什么也沒有。

這是我得到的錯誤：

我已使用“ react-router-dom”：“ ^ 5.0.1”

如何解決這個問題並使用<Link/>或更好的方法正確傳遞值。（ redux除外-仍在學習中）

Answer 1

我假設您的路線是這樣的：

<Route path="/edit/:id" component=componentName />

嘗試這個 ：

<Link to={`/edit/${this.state.value}`} />

Answer 2

嘗試將您的參數作為路由器內部的路徑url參數傳遞，因此將路由器組件更改為

<Route path="/edit/:id/:email/:name" component={ProfileEdit} /> 

或者，如果您不想設置它們，只需將路由器設置為

<Route path="/edit/:id?/:email?/:name?" component={ProfileEdit} /> 

該鏈接將是這樣的：

<Link to={{pathname:`/edit/${this.state.userID}/${this.state.email}/${this.state.userName}`}}>

然后在ProfileEdit組件中使用匹配道具訪問那些信息

因此可以像這樣訪問這些值：

this.state.email = this.props.match.params.email;
this.state.userName = this.props.match.params.name;
this.state.userID = this.props.match.params.id;

也拋出刪除錯誤：添加的onChange（控制），以你的輸入或替換默認值ATTR（不受控制）值看到此獲取更多信息。

TextField Component的新輸入應如下所示

<div className="form-label-group">
       <input type="text" id="inputEmail" defaultValue={valueOfEmail} className="form-control" placeholder="Name" required autoFocus/>
       <label htmlFor="inputEmail">Enter Name</label>
</div>

如果存在過多的糊狀參數，則必須使用商店管理器，（url中的糊狀參數太丑陋，可能會導致錯誤）