對狀態變化的React重新渲染

Question

const Feed = React.createClass({ 
getInitialState: function() { 
return { 
    data: {} 
} 
}, 

componentDidMount: function() { 
axios.all([ 
    getAllTeams(), getAllDrivers() 
]).then((results) => { 
    let teams = results[0].data; 
    let drivers = results[1].data; 
    let newDrivers = normaliseDrivers(drivers); 
    var data = normaliseData(teams, newDrivers); 
    this.setState({ 
     data: data 
    }) 
    }) 
}, 

sortAndRenderPanels() { 
let teamsArr = Object.values(this.state.data); 
teamsArr.sort(function(a,b) { 
    return (a.positions[0][2016] > b.positions[0][2016]) 
    ? 1 : ((b.positions[0][2016] > a.positions[0][2016]) 
    ? -1 : 0); 
}); 
return teamsArr.map ((data, i) => { 
    return (
     <MyPanel 
     key={i} 
     data={data} 
     /> 
) 
}) 
}, 

sortAlphabeticallyAndRender() { 
let teamsArr = Object.values(this.state.data); 
var sorted = teamsArr.sort(function(a, b){ 
    var textA = a.name.toUpperCase(); 
    var textB = b.name.toUpperCase(); 
    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 
}); 
return sorted.map((data, i) => { 
    return (
    <MyPanel 
     key={i} 
     data={data} 
    /> 
) 
}) 
}, 

handleAlphabetClick (e) { 
e.preventDefault(); 
this.sortAlphabeticallyAndRender(this.state); 
this.forceUpdate(function() { 
    return this.state.data; 
}); 
}, 

render: function() { 
const cards = this.sortAndRenderPanels(); 
return (
    <div id="feed"> 
    <Button id='sort-button' onClick={this.handleAlphabetClick} type="button" className="btn btn-warning" aria-label="Left Align"> 
     <span > Sort Alphabetically</span> 
    </Button> 
    {cards} 
    </div> 
) 
} 
}); 

On按鈕單擊我想重新渲染面板，以按字母順序顯示。我知道我的函數來正確命令它們的工作，並以正確的順序將數據記錄到控制檯，但似乎無法強制更新來重新呈現狀態。

Answer 1

而不是做強制更新，始終使變state變量，它會自動re-renderui，每當你是sorting的array，更新state值與排序array，並編寫一個單獨的方法來創建面板，您的面板將自動更新hout forceupdate，試試這個：

const Feed = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: {}, 
     } 
    }, 

    componentDidMount: function() { 
     axios.all([ 
      getAllTeams(), getAllDrivers() 
     ]).then((results) => { 
      let teams = results[0].data; 
      let drivers = results[1].data; 
      let newDrivers = normaliseDrivers(drivers); 
      var data = normaliseData(teams, newDrivers); 
      var value = this.sortAndRenderPanels(data); 
      this.setState({ data: value}) 
     }) 
    }, 

    sortAndRenderPanels: function (data) { 
     let teamsArr = Object.values(data); 
     teamsArr.sort(function(a,b) { 
      return (a.positions[0][2016] > b.positions[0][2016]) 
      ? 1 : ((b.positions[0][2016] > a.positions[0][2016]) 
      ? -1 : 0); 
     }); 
     return teamsArr || []; 
    }, 

    sortAlphabeticallyAndRender: function (data) { 
     let teamsArr = Object.values(data); 
     teamsArr.sort(function(a, b){ 
      var textA = a.name.toUpperCase(); 
      var textB = b.name.toUpperCase(); 
      return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 
     }); 
     return teamsArr; 
    }, 

    handleAlphabetClick: function (e) { 
     e.preventDefault(); 
     let data = this.sortAlphabeticallyAndRender(this.state.data); 
     this.setState({data:data}); 
    }, 

    createPanel: function(){ 
     return this.state.data.map((data, i) => { 
      return (
       <MyPanel 
        key={i} 
        data={data} 
       /> 
      ) 
     }) 
    } 

    render: function() { 
     return (
      <div id="feed"> 
       <Button id='sort-button' onClick={this.handleAlphabetClick} type="button" className="btn btn-warning" aria-label="Left Align"> 
        <span > Sort Alphabetically</span> 
       </Button> 
       {this.createPanel()} 
      </div> 
     ) 
    } 
}); 

Answer 2

如果我沒有錯，forceUpdate（）方法將調用render（）方法。

在渲染，你打電話：

const cards = this.sortAndRenderPanels(); 

，並以{}卡

我認爲你需要在this.state

移動卡在你componentDidMount打印出來（ ）回調補充一點：

componentDidMount: function() { 
    let obj = this; 
    axios.all([ 
     getAllTeams(), getAllDrivers() 
    ]).then((results) => { 
     let teams = results[0].data; 
     let drivers = results[1].data; 
     let newDrivers = normaliseDrivers(drivers); 
     var data = normaliseData(teams, newDrivers); 
     this.setState({ 
      data: data, 
      cards: obj.sortAndRenderPanels() 
     }) 
    }) 
} 

並在您單擊處理程序補充一點：

handleAlphabetClick (e) { 
    e.preventDefault(); 
    this.setState({ 
     cards: this.sortAlphabeticallyAndRender(this.state) 
    }); 
} 

重新呈現通常應該發生。如果不補充一點：

componentDidUpdate: function() { 
    this.forceUpdate(); 
} 

最後你需要在渲染{}卡更改與{} this.state.cards

問候