React- Props 过滤最佳实践

Question

我是 React 的中级开发人员，我想就实现道具过滤的最佳实践提供建议。

确实，当我想对这些道具进行排序时，我意识到我很有限：

是不是必须把这些props放在state里然后显示/排序州
有没有一种方法可以直接从道具中显示和排序table？

示例：

app.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 EventList

EventsAfter.js

class 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>
        <div className="air__utils__scrollTable">
          <Table
            columns={[
              {
                title: 'Evenements',
                dataIndex: 'name',
                key: 'name',
                className: 'text-gray-6',
              },
              {
                title: 'Date',
                dataIndex: 'date',
                key: 'date',
                className: 'text-gray-6',
                render: d => {
                  return <Moment format='LLL'>{d}</Moment>
                },
                sorter: (a, b) => a.date.size - b.date.size,
              }
            ]}
            dataSource={events}
            scroll={{ x: '100%' }}
          />
        </div>
      </div>
    )
  }
}

export default EventAfter

在第一个文件中，我将事件 (table) 发送到子组件“EventAfter”。在第二个文件中，当用户单击单选按钮时，它会更改排序状态（next_3_day、this_week、next_week）。

我愿意（但我不能），只排序和显示那些符合条件的事件而不修改原来的table（这样我就可以显示整个table).

你能帮帮我吗？我对这部分的反应是否正确或是否存在模式？

非常感谢，对我帮助很大

Answer 1

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

虽然你有一个叫做 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

React- Props 过滤最佳实践

React- Props filtering best practice

javascript

reactjs

redux

react-redux

react-props