Question

在items数组中，查找日期晚于当前日期new Date ()的对象。 let findObject = this.state.items.find (date => new Date (date.date)> new Date ());我在页面上显示找到的日期。问题：let findObject = this.state.items.find (date => new Date (date.date)> new Date ());仅找到一个对象，应该找到更多对象。

此处的代码：https://stackblitz.com/edit/react-fm2g6y

class Item extends Component {

  render() {
    console.log(this.props.findObject);

    return (   
        <li>
          <div>
            {moment(this.props.findObject.date).format("YYYY-MM-DD")}
          </div>
        </li>
    )
  }
}


class App extends React.Component {
  constructor() {
    super();

    this.state = {

      items: [
        {
          id: 1,
          date: 'Sun Oct 01 2017 05:30:00 GMT+0530 (IST)'
        },
        {
          id: 2,
          date: 'Fri Aug 23 2019 05:30:00 GMT+0530 (IST)'
        },
        {
          id: 3,
          date: 'Wed Oct 23 2019 04:30:00 GMT+0530 (IST)'
        },
        {
          id: 4,
          date: 'Wed Oct 24 2019 05:30:00 GMT+0530 (IST)'
        },
        {
          id: 5,
          date: 'Thu Oct 05 2019 05:30:00 GMT+0530 (IST)'
        }]      
    };
  }


  render() {
    let findObject = this.state.items.find(date => new Date   (date.date) > new Date());

    return (
      <div>
        <ul>
          {
            this.state.items
              .map((item, index) =>
                <Item
                  key={index}
                  index={index}
                  item={item}
                  findObject = {findObject}
                />
              )
          }
        </ul>
      </div>
    );
  }
}

Answer 1

如果需要多个结果，请用this.state.items.find替换this.state.items.filter。

find（）方法返回满足提供的测试功能的数组中第一个元素的值

含义仅返回与之匹配的第一件事。

（参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find）

另一方面

filter（）方法创建一个新数组，其中包含所有通过提供的功能实现的测试的元素

表示它将返回与其匹配的多个内容

（参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter）

Answer 2

在渲染返回中，然后添加地图过滤器

this.state.items.filter(e => new Date(e.date) > new Date()).map(...)

查找日期晚于当前日期的对象

2 个答案: