Question

我想定期从服务器获取数据，并在setState()提取数据时刷新行，但行在setState()之后不会重新呈现。

constructor(props) {
  super(props);

  this.state = {
    rows: []
  }

  this.refreshList = this.refreshList.bind(this);
}

refreshList() {
  req.get('/data').end(function (error, res) {
    // type of res is array of objects
    this.setState({
      rows: res
    });
  });
}

// call this method on button clicked
handleClick() {
  this.refreshList();
}

render() {
  return(
    <div>
      <button onClick={this.handleClick}>Refresh List</button>
      <Table rows={this.state.rows}/>
    </div>
  );
}

当致电refreshList()时，新的展示数据无法呈现。

我的表组件是：

// Table component
export class Table extends Component {

  constructor(props) {
    super(props);

    this.state = {
      rows: props.rows
    }
  }

  render() {
    return (
      <div>
      {this.state.rows.map((row, i) => (
        <div>{row.title}</div>
      ))}
      </div>
    )
  }
}

非常感谢你的帮助。如何刷新点击按钮列表？

Answer 1

您的表组件在构造后永远不会更改其状态。您可以通过从新道具更新状态来轻松修复它：

export class Table extends Component {

  constructor(props) {
    super(props);

    this.state = {
      rows: props.rows
    }
  }

  componentWillReceiveProps(newProps) {
    this.setState({
      rows: newProps.rows
    });
  }

  render() {
    return (
      <div>
      {this.state.rows.map((row, i) => (
        <div>{row.title}</div>
      ))}
      </div>
    )
  }
}

但是，如果您的表格组件如此简单，您可以将其设为无状态，并在没有props的情况下直接使用setState()：

export class Table extends Component {
  render() {
    return (
      <div>
      {this.props.rows.map((row, i) => (
        <div>{row.title}</div>
      ))}
      </div>
    )
  }
}

注意现在不需要constructor。我们实际上可以使它成为一个功能组件。

Answer 2

使用箭头功能：

req.get('/data').end((error, res)=> {
  // type of res is array of objects
  this.setState({
    rows: res
  });
});

使用ES5样式回调函数，this的上下文会丢失。

您还可以将this直接绑定到本地变量，即var that = this，并坚持function语法，但我认为大多数人会同意ES6箭头语法更好。

定期从服务器获取数据并在reactjs中重新呈现视图

2 个答案: