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

开启按钮单击我想重新渲染面板，按字母顺序显示。我知道我的函数正确地命令它们工作，并以正确的顺序记录到控制台，但我似乎无法强制更新重新呈现状态。

Answer 1

如果我没错，forceUpdate（）方法将调用render（）方法。

在渲染中，您正在调用：

const cards = this.sortAndRenderPanels();

并使用{cards}打印它们

我认为你需要在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}

更改渲染{cards}

此致

Answer 2

不是进行强制更新，而是始终在state变量中进行更改，只要re-render ui sorting，它就会自动array state }，使用已排序的array更新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> ) } });，请尝试：

org.apache.poi:poi-contrib

对状态变化做出反应重新渲染

2 个答案: