javascript - React：没有 Redux 的持久性道具

问题描述

我正在将 React-Router 与 React 一起使用，并尝试将列表从组件传递到另一个组件。一旦我单击候选列表，我就会在控制台记录数据是否未定义，我立即得到错误（意味着有数据），但是当我导航到页面时，我得到真实（意味着那里没有数据）。

这是我的应用程序组件

class App extends Component {

      constructor(){
        super()


    this.state = {
      applications: [{
        "id":1, "name":"John Smith", "position":"Server", "applied":"03/15/16", "experience":2, "availability":{
        "M":2, "T":2, "W":1, "Th":2, "F":1, "S":0,
        "Su":0 }, "questions":[
        {
        "text":"Have you ever been convicted of a felony?", "answer":"No" } ] }, 
        {
        "id":2, "name":"Jane Smith", "position":"Cook", "applied":"02/08/16", "experience":4, "availability":{
        "M":1, "T":1, "W":1, "Th":1, "F":0, "S":0, "Su":0 }, "questions":[
        {
        "text":"Have you ever been convicted of a felony?", "answer":"Yes" } ] }, 
        {
        "id":3, "name":"David Jessup", "position":"Chef", "applied":"03/08/16", "experience":2, "availability":{
        "M":2, "T":2, "W":2, "Th":2, "F":2,
        "S":0, "Su":0 }, "questions":[
        {
        "text":"Are you authorized to work in the United States?", "answer":"Yes" } ] }, 
        {
        "id":4, "name":"Clay van Schalkwijk", "position":"Cook", "applied":"03/08/16", "experience":1, "availability":{
        "M":1, "T":0, "W":1, "Th":0, "F":1, "S":0, "Su":0 }, "questions":[
        {
        "text":"Are you authorized to work in the United States?", "answer":"Yes" } ] }
        ],
        searchField:'',
        saved:[],
    }
  }
  render() {
           return (
      <BrowserRouter>
      <div className='main'>
      <Sidebar/>
      <div className="App">
      <Search searchChange={this.onSearchChange}/>
      </div>
      <Switch>

        <Route exact path='/' render={()=> <Applications props={this.state}/>} />
        <Route path='/shortlistedApplicants' render={()=> <ShortlistedApplicants props={this.state.saved}/>}/>
        </Switch>
      </div>
      </BrowserRouter>
    );
  }
}

export default App;

这是我的应用程序页面，显示所有申请人。每个都有一个我可以点击的按钮，可以添加到另一个状态数组（忽略下面的状态，我将更改为道具）

class Applications extends Component{
    constructor(props){
        super(props)
               }
    onFavorite = applicant => {
      const { saved } = this.state; 
      const index = saved.indexOf(applicant);

      if(index === -1) {
       this.setState({
        saved: [...saved, applicant],
       })

      } else {
        saved.splice(index, 1);
        this.setState({saved});
      }
    }
    onSearchChange = (event) => {
      this.setState({
        searchField:event.target.value
      })
    }

    onRemove = applicant => {
      const {saved} = this.state;
      saved.splice(saved.indexOf(applicant), 1);
      this.setState({
        saved
      })
    }
    render(){
           return(
               <div>
               <Header state={this.state} searchChange={this.onSearchChange}/>
            <div className='scroll'>
           <table className='app-table'>
                       <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Exp.</th>
                    <th>Question</th>
                    <th>Availability</th>
                    <th></th>
                    <th></th>
                    </tr>
                    {this.state.applications.map((app) => {
                        return(
                            <tr>
                            <td>{app.name}</td>
                         <td>{app.position}</td>
                         <td>{app.experience}</td>
                         <td>{app.questions[0].text} 
                         <p>
                         {app.questions[0].answer} </p>
                         </td>
                         <td><strong>M:</strong>{app.availability.M}, 
             <strong>T:</strong> {app.availability.T},
             <strong>W:</strong> {app.availability.W},
             <strong>Th:</strong> {app.availability.Th},
             <strong>F:</strong> {app.availability.F},
             <strong>S:</strong> {app.availability.S},
             <strong>Su:</strong> {app.availability.Su}</td>
     <td>Applied On: {app.applied}</td>
     <td><Btn onFavorite={() => this.onFavorite(app)} shortlist={this.state.saved.includes(app)}/></td>
                        </tr> )})}
                    </table>
                    </div>
           <ShortlistedApplicants saved={this.state.saved} onRemove={this.onRemove}/>
           </div>
        )
    }
}

export default Applications;

最后这里是我想通过应用程序中保存的数组映射然后显示的入围页面。但是，在这里导航时我一直在丢失状态

const ShortlistedApplicants = ({saved, onRemove}) => {
    let applicants;
    console.log(saved===undefined)
    if(saved === undefined){
        applicants = <div>Nothing to Show</div>
        } 
        if(saved) {
            applicants = saved.map((app) => {
                return(
                    <table className='app-table'>
                    <tr>
                        <th>Name</th>
                        <th>Name</th>
                        <th>Name</th>
                        <th>Name</th>
                        <th>Name</th>
                        <th>Name</th>
                        <th>Name</th>
                        </tr>
                       <tr>
                           <td>{app.name}</td>
                        <td>{app.position}</td>
                        <td>{app.experience}</td>
                        <td>{app.questions[0].text}
                        {app.questions[0].answer}
                        </td>
                        <td>M:{app.availability.M}, 
            T:{app.availability.T},
            W:{app.availability.W},
            Th:{app.availability.Th},
            F:{app.availability.F},
            S:{app.availability.S},
            Su:{app.availability.Su}</td>
    <td>Applied On: {app.applied}</td>
    <td><button onClick={() => onRemove(app)}>X</button></td>
                    </tr>
                    </table>
                )
            })

    }
    return(
        <div className='shortlisted'><h1 className='shortlisted'>Shortlisted Applicants Page</h1>
              <hr style={{borderTop:"black 5px solid"}}/>
              {applicants}
        </div>
    )
}

export default ShortlistedApplicants;

标签： javascriptreactjs

javascript - React：没有 Redux 的持久性道具

问题描述

解决方案

推荐阅读