React-道具过滤最佳实践

Question

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

确实，我意识到我在对这些道具进行排序时非常有限：

1. 我是否必须将这些道具放在状态中然后显示/排序状态

2. 有没有一种方法可以直接从道具中显示和排序表格？

例子 ：

应用程序.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>

在第一个文件中，我将事件（表）发送到子组件“ 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&nbsp;对我来说似乎有点可疑。您的排序当前是否使用此值？

Answer 2

在您的情况下，最好将其称为过滤而不是排序，否则听起来有点混乱，排序通常意味着排序...但是，是的，最好在 state 中创建一个属性，其中将包含已过滤或有序的数组。this.setState({&nbsp;&nbsp; dateSort: value.target.value&nbsp;&nbsp; eventsFiltered: this.props.event.filter(someFilterFunc)})并传递给子组件 this.state.eventsFiltered