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

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() 时，新的 feteched 数据不呈现。

我的 table 组件是：

// 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

使用箭头函数：

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 箭头语法是什么更好。

Answer 2

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

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>
    )
  }
}

不过，如果你的table组件这么简单，你可以让它无状态，直接使用props而不用setState():

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

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

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

Fetch data periodically from server and re-render view in reactjs

setstate

reactjs