对状态变化的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

问候