React-道具过滤最佳实践

Question

我是 React 的中级开发人员，我想就实现 props 过滤的最佳实践提出建议。确实，我意识到我在对这些道具进行排序时非常有限：我是否必须将这些道具放在状态中然后显示/排序状态有没有一种方法可以直接从道具中显示和排序表格？例子 ：应用程序.js@connect(({ events }) => ({ events }))class EventList extends React.Component { constructor(props) {    super(props);    this.state = {    };  }  componentDidMount() {    const { dispatch } = this.props    dispatch({type: 'events/GET_ALL_EVENTS'})  }  render() {    const { events } = this.props    const { allEvents } = events    return (      <div>        <div className="card">           <div className="card-body">              <EventsAfter events={allEvents} />           </div>         </div>      </div>    )  }}export default EventListEventsAfter.jsclass EventAfter extends React.Component {  constructor(props) {    super(props);    this.state = {      dateSort: "next_3_day",    };  }  sortDate = value=> {    this.setState({ dateSort: value.target.value })    /* NEED TO SORT PROPS ARRAY OF EVENTS HERE */  }  render() {    const { events } = this.props    const { dateSort } = this.state    return (      <div>        <div className="row">          <div className="col-lg-12">            <div>              <div style={{display:"inline-block", paddingBottom:'10px'}}>                <Radio.Group size="default" value={dateSort} onChange={this.sortDate}>                  <Radio.Button value="next_3_day">Les trois prochains jours</Radio.Button>                  <Radio.Button value="this_week">Cette semaine</Radio.Button>                  <Radio.Button value="next_week">La semaine prochaine</Radio.Button>                </Radio.Group>              </div>            </div>          </div>        </div>在第一个文件中，我将事件（表）发送到子组件“ EventAfter ”。在第二个文件中，当用户单击单选按钮时，它会更改排序状态（next_3_day, this_week, next_week）。我想（但我不能）只对符合条件的事件进行排序和显示而不修改原始表格（以便我可以显示整个表格）。你能帮助我吗 ？我在这部分正确使用 react 还是存在模式？

Answer 1

您的表列已经有一个排序功能，允许重新排序，因此您不需要将排序后的值存储在状态中。

尽管您有一个dateSort: "next_3_day"看起来像是您想要过滤数据集（而不仅仅是排序）的东西，但这是一个不同的问题。

看起来您想要执行以下操作：

dataSource={this.state.dateSort === 'next_3_day' ? events.filter(x=>x.date > new Date((new Date()).getTime() + (60*60*24*3))):this.events}

[并扩展其他 3 个 dateSorts` 选项]

我个人不会将过滤后的值存储在状态中，我只会创建一个过滤它的函数。

您正在设置状态，dateSort以便组件将重新渲染，并允许从父组件传递新数据。

我还建议https://date-fns.org/在此处使用简化的日期算术。

我看不到您输入的数据类型，但a.date.size 对我来说似乎有点可疑。您的排序当前是否使用此值？

Answer 2

在您的情况下，最好将其称为过滤而不是排序，否则听起来有点混乱，排序通常意味着排序...

但是，是的，最好在 state 中创建一个属性，其中将包含已过滤或有序的数组。

this.setState({ 

  dateSort: value.target.value 

  eventsFiltered: this.props.event.filter(someFilterFunc)

})

并传递给子组件 this.state.eventsFiltered