ajax реквизит/состояние не может перейти в класс reactjs

Question

Попытка передать состояние дочернему компоненту не работает. Я использую Reactjs ES6 для вызова ajax и успеха, передаю первый идентификатор данных в качестве исходного состояния для моего дочернего компонента. но внутри одного и того же компонента он работает хорошо.

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Grid,Row,Col,Collapse,FormGroup,FormControl} from 'react-bootstrap'; 

export default class Dashboard extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     UserFullName: this.props.UserFullName, 
     token:this.props.token, 
     UserCampList:[], 
     SelectedCampId:'', 
     filterText: '', 
     filterBy: '', 
    } 
    } 

    handleChange=(event,eventKey)=> { 
     this.setState({SelectedCampId:event.target.value,filterText:event.target.value,filterBy:'advertiser'}); 
    } 

    _getCamp(UserFullName,token){ 
    $.ajax({ 
     url: 'http://localhost:9000/csd/camp/user/Daniel%20Graham', 
     //url: 'http://localhost:9000/csd/camps/user/'+UserFullName, 
     contentType: "application/json", 
     dataType: "json", 
     success:(data)=>{ 
      if(data == ""){ 
       this.setState({ErrorMessage: "Camp data not available"}); 
      }else{ 
       this.setState({UserCampList:data,SelectedCampId:data[0].campId}); 
      } 
     }, error:(e)=>{ 
      this.setState({ErrorMessage:e.statusText}); 
     } 
    }); 


    } 
    componentWillMount(){ 
    (this.state.UserFullName)?this._getCamp(this.state.UserFullName,this.state.token):""; 
    } 

    render(){ 
    return (
     <Grid className="content"> 
     <Row> 
     <Col xs={6} md={4}> 
     <div className="err">{this.state.ErrorMessage}</div>    
     <form> 
      <FormGroup controlId="formControlsSelect" ref="advertisersDD" className="adv-list" value={this.state.selectedAdvertiser} onChange= {this.handleChange} > 
       <FormControl componentClass="select" placeholder="Adversiers"> 
       { 
       this.state.UserCampList.map((Camp,i)=> { 
        return <option key={i} value={Camp.CampId}>{Camp.advertiser}</option>; 
       }) 
       } 
       </FormControl> 
       </FormGroup> 
     </form> 
     </Col> 
     <Col xs={6} md={4} > 
      Search 
     </Col> 
     </Row> 
     <Row> 
     {this.state.SelectedCampId} ---- 
      <Table SelectedCampId={this.state.SelectedCampId}/> 
      {this.state.SelectedCampId} ---000 
     </Row> 
     </Grid> 
    ); 
    } 
} 


class Table extends React.Component{ 
    constructor(props){ 
    super(props); 
    console.log(this.props); 
    this.state={ 
     SelectedCampId:this.props.SelectedCampId 
    }; 
    } 
render(){ 
    return (
      <div> 
       {this.state.SelectedCampId} Camp Id 
      </div> 
     ); 
    } 
} 

Выход:

15004354 ---- //before calling Table component 
camp Id // Inside Table component 
15004354 ---000 //after calling Table component 

Answer 1

Table, вероятно, не иметь свое собственное государство. Если это произойдет, и состояние зависит от переданных реквизитов, вам нужно будет обновить состояние, когда вы получите новые реквизиты. Вы можете сделать это через componentWillReceiveProps.

Это то, что происходит прямо сейчас в вашем коде:

1. Первая визуализация: SelectedCampId является ''. Table построен и копирует это значение в его состояние и отображает его состояние.
2. Вторая визуализация (после вызова Ajax): SelectedCampId is '123'. Table обновлен, он получает новое значение в качестве оповещения и игнорирует его.

Поскольку нет ничего в Table, что требует состояние, вы должны просто напрямую использовать реквизит:

class Table extends React.Component{ 
    render(){ 
    return (
     <div> 
     {this.props.SelectedCampId} Camp Id 
     </div> 
    ); 
    } 
} 

Или как лица без функции:

function Table({SelectedCampId}) { 
    return (
    <div> 
     {SelectedCampId} Camp Id 
    </div> 
); 
}