對狀態變化做出反應重新渲染

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}打印出來

我認為你需要在這個狀態中移動卡片

在你的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>
        )
    }
});