Javascript 在状态更改时重新渲染 const Feed=React.createClass({ getInitialState:函数（）{ 返回{ 数据：{} } }, componentDidMount:函数（）{ axios.all([ getAllTeams（），getAllDrivers（） ])。然后（（结果）=>{ 让团队=结果[0]。数据； 让drivers=results[1]。数据； 让newDrivers=normaliseDrivers（drivers）； var数据=正常数据（团队、新驾驶员）； 这是我的国家({ 数据：数据 }) }) }, sortAndRenderPanels（）{ 让teamsArr=Object.values（this.state.data）； teamsArr.sort（功能（a、b）{ 回报率（a.positions[0][2016]>b.positions[0][2016]） 1:（（b.职位[0][2016]>a.职位[0][2016]） ? -1 : 0); }); return teamsArr.map（（数据，i）=>{ 返回( ) }) }, sortAlphabeticallyAndRender（）{ 让teamsArr=Object.values（this.state.data）； var sorted=teamsArr.sort（函数（a，b）{ var textA=a.name.toUpperCase（）； var textB=b.name.toUpperCase（）； 返回（textAtextB）？1:0； }); 返回排序后的.map（（数据，i）=>{ 返回( ) }) }, 手握式键盘点击（e）{ e、 预防默认值（）； 本州； 此.forceUpdate（函数（）{ 返回此.state.data； }); }, 渲染：函数（）{ const cards=this.sortAndRenderPanels（）； 返回( 按字母顺序排序 {卡片} ) } });

单击按钮，我想重新渲染面板，以按字母顺序显示。我知道我的函数可以正确地对它们进行排序，并以正确的顺序将数据登录到控制台，但我似乎无法强制更新以重新呈现状态。

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

在渲染中，您正在调用：

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

然后用{cards}打印出来

我想你需要在这个州移动牌

在componentDidMount（）回调中添加以下内容：

const cards = this.sortAndRenderPanels();

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

然后在单击处理程序中添加以下内容：

const cards = this.sortAndRenderPanels();

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

通常应进行重新渲染。如果没有，请添加以下内容：

const cards = this.sortAndRenderPanels();

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

最后，您需要使用{this.state.cards}更改渲染{cards}

---

关于

而不是执行强制更新，始终在

状态

变量中进行更改，它将自动

重新呈现
用户界面
，无论何时对
数组进行排序
，使用排序后的
数组
更新
状态
值，并编写一个单独的方法来创建面板，您的面板将自动更新，而无需
forceupdate
，请尝试以下操作：

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

const Feed=React.createClass({
getInitialState:函数（）{
返回{
数据：{}，
}
},
componentDidMount:函数（）{
axios.all([
getAllTeams（），getAllDrivers（）
])。然后（（结果）=>{
让团队=结果[0]。数据；
让drivers=results[1]。数据；
让newDrivers=normaliseDrivers（drivers）；
var数据=正常数据（团队、新驾驶员）；
var值=this.sortAndRenderPanels（数据）；
this.setState（{data:value}）
})
},
sortAndRenderPanels:函数（数据）{
让teamsArr=Object.values（数据）；
teamsArr.sort（功能（a、b）{
回报率（a.positions[0][2016]>b.positions[0][2016]）
1:（（b.职位[0][2016]>a.职位[0][2016]）
? -1 : 0);
});
返回团队R | |[]；
},
sortAlphabeticallyAndRender:函数（数据）{
让teamsArr=Object.values（数据）；
teamsArr.sort（功能（a、b）{
var textA=a.name.toUpperCase（）；
var textB=b.name.toUpperCase（）；
返回（textAtextB）？1:0；
});
返回队；
},
handleAlphabetClick：函数（e）{
e、 预防默认值（）；
让data=this.sortalphabeticallyandderder（this.state.data）；
this.setState（{data:data}）；
},
createPanel:函数（）{
返回this.state.data.map（（数据，i）=>{
返回(
)
})
}
渲染：函数（）{
返回(
按字母顺序排序
{this.createPanel（）}
)
}
});
将Ui项存储在状态变量中，始终存储数据并仅在数据中进行更改，然后使用更新的数据创建Ui，这是一种非常糟糕的做法。我尝试过使用此代码，无论是否使用
componentDidUpdate（）
，但它似乎不起作用，感谢您的帮助。您好，Mayank，此代码似乎没有响应。感谢您的回答。您得到的错误是什么，因为我确信它应该可以工作：）
无法将未定义或null转换为object
我相信这是在
sortalphabeticallyandender（）
中，因为数据以
对象的形式到达，而我正在转换为
数组，这就是发生的情况，因为我忘了删除这一行
const cards=this.sortAndRenderPanels（）在render方法内部，尝试更新的代码，它将工作：），因为在这种情况下，数据为null，然后它Object.values尝试获取值。工作正常。感谢@MayankAs的react最佳实践，永远不要执行forceUpdate（除非您确定为什么要执行forceUpdate）。fire渲染方法的用户setState（）