Question

我正在将React-Router与React一起使用，并试图将列表从组件传递到另一个组件。我在控制台上记录一下，一旦我单击入围列表并立即得到false（表示有数据），数据是否未定义，但是当我导航至页面时，我得到了true（表示那里没有数据）。

这是我的应用程序组件

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;

这是我的申请页面，显示所有申请人。每个按钮都有一个我可以单击的按钮，可以添加到状态中的另一个数组中（忽略下面显示状态的地方，我将更改为props）

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;

Answer 1

您是否考虑过使用Context API？

它已经过修改，并包含在React v16 +中。这是处理状态管理的一种很好的轻量级方法。

Answer 2

您是否尝试过将道具传递给App?

在App.js中的一个道具中传递this.state对象时，您会得到什么？

我认为用法是错误的。您可能需要具体说明需要从父组件传递哪些数据。

还要在任何地方导入原型库吗？

反应：没有Redux的持久道具

2 个答案: