Question

在我的ReactJS项目中，我有Table并对其进行过滤。我使用JSON主机中的axious获得Django REST个文件。所以我有一个主要的Table课程：

class MainTable extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      results: [],
      count: 0
    };
  }

  shouldComponentUpdate(nextProps) {
    console.log(this.props.link + " : " + nextProps.link);
    return JSON.stringify(this.props.link) !== JSON.stringify(nextProps.link);
  }

  render() {
    axios.get(this.props.link)
      .then(res => {
        this.setState({results: res.data.results});
        this.setState({count: res.data.count});
    });
    return (
      <div>
        <div>
          <Label> We got {this.state.count} elements in our database. </Label>
        </div>
        <div>
          <Table hover striped bordered responsive size="sm">
            <thead>
              <tr>
                <th>Name</th>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              {this.state.results.map(result =>
                <tr key={result.fileId}>
                  <td>{result.name}</td>
                  <td>{result.name}</td>
                </tr>
              )}
            </tbody>
          </Table>
        </div>
      </div>
    );
  }
}

但是当我运行我的应用程序时，我有一步延迟，这是日志：

"http://106.120.89.142:8000/database/?limit=10& : http://106.120.89.142:8000/database/?limit=10&" bundle.js:53418:7
./src/App.js
"http://106.120.89.142:8000/database/?limit=10& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3&"  bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3&" bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltcall&"  bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltcall& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltcall&" bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltcall& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcrsutc&"  bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcrsutc& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcrsutc&" bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcrsutc& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3&"  bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3&" bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltcall&"  bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltcall& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltcall&" bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltcall& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3&"  bundle.js:53418:7
"http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3& : http://106.120.89.142:8000/database/?limit=10&ORIGIN=dcseltc3&"

它会进行两次数据检查，并在下次检查后重新运行我的渲染。也许我做错了什么。我是ReactJS的新人，我认为应该很容易回答它。

Answer 1

在设置新状态实例后始终调用Render，因此如果将setState放在componentDidMount（）中，则应使用新数据刷新。并且setState只有一次。

class MainTable extends React.Component {
...
componentDidMount() {
    axios.get(this.props.link)
      .then(res => {
        this.setState({results: res.data.results, count: res.data.count});
    });
}
componentWillReceiveProps(nextProps) {
    axios.get(nextProps.link)
      .then(res => {
        this.setState({results: res.data.results, count: res.data.count});
    });
}
...
render() {
 return ...
}

使用ShouldComponentUpdate（）时一步延迟

1 个答案: