ShouldComponentUpdate（）を使用している間に1つのステップ遅延

Question

私のReactJSプロジェクトでは、私はTableを持っており、それをフィルタリングしています。私はaxiousをDjango RESTホストから使用してJSONファイルを得ました。だから私は私のメイン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&" 

それを2回再放送データチェックを行い私のレンダリングは次のチェックの後でしかない。多分私は何か間違ったことをしました。私はReactJSで新しく、私はそれが簡単に答えるべきだと思います。

Answer 1

レンダリングは常に新しい状態インスタンスが設定された後に呼び出されるため、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 ... 
}