无法重新渲染子组件reactjs

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，因此不建议将诸如class和for之类的标识符用作XML属性名称。 相反，React DOM组件期望DOM属性名称分别为className和htmlFor。