Question

美好的一天。当状态改变时，我无法重新渲染我的子组件。

export default class Featured extends React.Component {

constructor(){
  super()
  this.state = {
    result: []
  }
}

componentDidMount(){
  $.ajax({
    type: "GET",
    dataType:'JSONP',
    beforeSend: function (request){
      request.setRequestHeader("Authorization", Config.key);
    },
    url: "myUrl",
    success: function(data) {
      this.setState({
        result: data.users
      });
      console.log(this.state.result);//here i got my Array
    }.bind(this)
  });
}

componentWillUnmount(){
  this.serverRequest.abort();
}

render() {
  return (
    <div class="">
      <div class="row">
        <Card data={this.state.result} />
      </div>
    </div>
  );
 }
}

当ajax请求成功时我改变了状态，我不知道如何重新渲染我的组件。这是

的一些代码

export default class extends React.Component {

render() {
  console.log(this.props.data);
  return (
    <div class="flex-container">
      { 
        this.props.data.map(function(item, index) {
          return <div class="col-xs-12 col-sm-6 col-md-12" key={item._id}>

我错过了什么？这是控制台屏幕 http://prntscr.com/ap24x5

Answer 1

您的语法错误，我可以立即发现一些事情：

你不能在render函数中使用class，你必须使用className
你的第二个组件的语法不正确，你需要调用它：

export default class MyComponent extends React.Component {

由于JSX是JavaScript，因此不鼓励使用类和for等标识符作为XML属性名称。相反，React DOM组件分别需要DOM属性名称，如className和htmlFor。

无法重新渲染子组件reactjs

1 个答案: