Question

尝试将状态传递给子组件不起作用。我使用Reactjs ES6来调用ajax并且成功时，将第一个数据id作为我的子组件的初始状态传递。但在相同的组件内，它运作良好。

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完成此操作。

这就是您现在在代码中发生的事情：

首先渲染：SelectedCampId为''。构造Table并将该值复制到其状态并呈现其状态。
第二次渲染（在Ajax调用之后）：SelectedCampId是'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>
  );
}

ajax props / state无法传递给class reactjs

1 个答案: