React DayPicker 无限循环或没有值

Question

该应用程序将一系列生日与当天匹配。 我想用一个日期选择器扩展它，这样它不仅会显示当天的生日，还会显示所选日期的生日。

console.log 的结果是我期望的值，尽管它们出现了两次，但这是我得到的关闭值。 我找不到让它们在没有无限循环或未知值的情况下呈现的方法。

这是我当前的代码：

import React, { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import data from './writers-birthday-array.json';

function PickDate() {

  const [selected, setSelected] = useState();
  const [matchDate, setMatchDate] = useState(data);
  const [listWriter, setListWriter] = useState([]);

  if (selected) {
    let formattedDate =
      ('0' + selected.getDate()).slice(-2) + `/` + (selected.getMonth() + 1);

    const listedWriter = matchDate.filter(
      (writer) => writer.birthday === formattedDate
    );


    //setListWriter(listedWriter); -> this will cause an infinite loop



    console.log(formattedDate); //correct value
    console.log(listedWriter); // this is the value I want to display on the page
  }

  return (
    <main>
      <section className="container">
        <div>
          <h3>Pick a date</h3>
          <DayPicker
            mode="single"
            selected={selected}
            onSelect={setSelected}    
          />
        </div>
     
        {listWriter ? <div> {listWriter} </div> : <div></div>}
        //here listWriter has no value     
     </section>
    </main>
  );
}

export default PickDate;

这是我用于日期选择器的 package： https://www.npmjs.com/package/react-day-picker

该应用程序部署在 Netlify 上，第一个显示作者的模块工作正常： https://writers-birthday.netlify.app/

Answer 1

我发现了这个问题，它与DayPicker无关，而是与我声明变量的方式有关。 这是新代码，工作正常:)

import React, { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import data from './writers-birthday-array.json';
import List from './List';

function PickDate() {
  //selected: the value given by DayPicker when a date is selected
  const [selected, setSelected] = useState();
  const [matchDate, setMatchDate] = useState(data);
  let formattedDate = 0;
  let listedWriter = '';

  if (selected) {
    formattedDate =
      ('0' + selected.getDate()).slice(-2) + `/` + (selected.getMonth() + 1);
  }
  //console.log(formattedDate);

  if (formattedDate != 0) {
    listedWriter = matchDate.filter(
      (writer) => writer.birthday === formattedDate
    );
  }

  //console.log(listedWriter);

  return (
    <main>
      <section className="container">
        <div>
          <h3>Pick a date</h3>
          <DayPicker
            mode="single"
            selected={selected}
            // onChange={(date) => setSelected(date)}
            onSelect={setSelected}
            //footer={footer}
          />
        </div>

        {selected ? (
          <List people={listedWriter} />
        ) : (
          <div>Please pick a date</div>
        )}
      </section>
    </main>
  );
}

export default PickDate;