React.js状态问题

React.js State Issue

本文关键字：问题 状态 js React      更新时间：2023-09-26

我有下面的jsfiddle，我正在尝试筛选记录，所以一旦选择了类别，我只想显示该类别的结果。不确定我对各州缺少什么。

https://jsfiddle.net/kkhwabzr/

var App = React.createClass({
    render: function() {
        return (
        <div>
            <Instructions />
            <h1>Requests</h1>
        </div>
        );
    }
});

您需要监控主应用程序组件的选择状态。现在，您正在跟踪MySelect组件中的选择。这意味着应用程序组件没有这些信息，不能将其作为道具传递给DisplayRecords组件。

正确的方法是将选择作为状态变量保留在应用程序组件中，并将其值和onChange处理程序作为道具传递给MySelect组件：

getInitialState: function() {
    return { selected: "All Requests" }
},
onChange:function(e){
    this.setState({selected: e.target.value})
},
render: function() {
    return (...
        <MySelect selected={this.state.selected} onChange={this.onChange} />
        <DisplayRecords records={this.props.data.filter(this.filterRecord)}
    ...)
}

如前所述，您可以使用过滤器来获得正确的记录，但您也应该考虑到"所有请求"的情况，即您希望返回所有记录，因此：

filterRecord: function(record) {
  if(this.state.selected === null) return true;
  return (record.status === this.state.selected || this.state.selected === "All Requests");
}

有关代码的工作示例，请参阅jsfiddle：https://jsfiddle.net/kkhwabzr/3/

我已经尽可能少地修改了它，这样你就可以理解代码是如何在你的版本和工作版本之间发生变化的。注意，我还在使用React时添加了建议的标记（从表中删除行会导致TypeError），并更改了{value:…}值，使其在record.status和组件状态之间保持一致。

相关文章：