来自 API 调用的数据存储在一个数组中，但是当我尝试在 function 中使用该数组以供进一步使用时，它显示该数组为空。 为什么？

Question

用于将数据从 API 存储到数组并使用相同数组的 event_date 值以供进一步使用的React代码。

export const UpcomingHolidays = (props: UpcomingHolidaysProps) => {
  const [holidayPlans, setHolidayPlans] = useState([]);

  const [dateArray, setDate] = useState([]);

  useEffect(() => {
    getHolidayPlans();
  }, []);

  const getHolidayPlans = async () => {
    const holidayResp = await PortalHolidayService.getInstance().getHolidayPlans();
    if (holidayResp) {
      setCities(() => holidayResp.cityModule);
      setHolidayPlans(() => holidayResp.holidayModule);
      setDate(() => holidayResp.holidayModule);
    }
    let today = new Date();
    console.log(holidayPlans);
    holidayPlans.filter((date) => {
      const eventDate = new Date(date.event_date);
      console.log(eventDate);
    });
  };

那么，当我使用 Same (holidayPlans) 数组显示 html 中的某些内容时，它显示了值并正确显示，但是当我在 function 中使用时，它显示数组中没有数据。

console.log(holidayPlans) 显示了这个

用于在 html 中显示的相同数组

Answer 1

这是一个挑战：写一个 JavaScript function useState这样 console.log 输出一个4然后一个5 ：

function render() {
  let [thing, setThing] = useState(4);
  console.log(thing); // 4
  setThing(5);
  console.log(thing); // 5
}

无论你做什么，你永远无法写出这个 function，因为没有外部 JavaScript function 将能够设置thing变量的值； 那是因为外部 JavaScript 没有办法修改thing变量。 useState所能做的就是设置它自己的内部state 并更改它返回的内容。 愚蠢的例子在这里：

let hiddenState;
function useState(initialValue) {
  if (hiddenState === undefined) {
    hiddenState = initialValue;
  }
  const setState = value => {
    hiddenState = value;
  }
  return [hiddenState, setState];
}

这意味着如果再次调用useState ， render将只能获得一个新值：

function render() {
  let [thing, setThing] = useState(4);
  console.log(thing); // 4
  setThing(5);

  [thing, setThing] = useState(4);
  console.log(thing); // 5
}

这本质上就是useState所做的，但是隐藏的 state 每个实例都是唯一的。 如您所见， setState被视为“异步”，因为 state 更改直到下一次渲染才会反映出来。 setState排队重新渲染请求。 下次调用 render function 时，将再次调用useState ，并返回一个新值。

请注意，通过这些代码修改，而不是我们在更新之前引用 state 变量，我们仍然可以引用您的响应 object 来获取数据：

export const UpcomingHolidays = (props: UpcomingHolidaysProps) => {

  // On the first rendering of `UpcomingHolidays`, holidayPlans will be [].
  // After setHolidayPlans is called, a re-render will be queued, and this
  // UpcomingHolidays  function will be called again. When useState is called
  // the second time, it will have the value passed into setHolidayPlans.
  const [holidayPlans, setHolidayPlans] = useState([]);

  // Same for dateArray.
  const [dateArray, setDate] = useState([]);

  useEffect(() => {
    getHolidayPlans();
  }, []);

  async function getHolidayPlans() {
    const holidayResp = await PortalHolidayService.getInstance().getHolidayPlans();
    if (!holidayResp) {
      return;
    }

    // These will flag the component as needing to re-render after the effect
    // completes. They do not change the local variables; they update the
    // internal data of the useState hooks so that the next time those useState
    // calls occur, they'll return new values.
    setCities(holidayResp.cityModule);
    setHolidayPlans(holidayResp.holidayModule);
    setDate(holidayResp.holidayModule.map(date => new Date(date.event_date));

    // If you want to log here, don't reference state, which hasn't updated yet.
    // Either store response data as variables or reference the response itself.
    console.log('Holidays are', holidayResp.holidayModule);
  }

  return <div>Your content</div>;
}

Answer 2

如果你移动你的console.log(holidayPlans); 从getHolidayPlans function 中，您将获得更新后的值。

export const UpcomingHolidays = (props: UpcomingHolidaysProps) => {
  const [holidayPlans, setHolidayPlans] = useState([]);

  const [dateArray, setDate] = useState([]);

  useEffect(() => {
    const getHolidayPlans = async () => {
      const holidayResp = await PortalHolidayService.getInstance().getHolidayPlans();
      if (holidayResp) {
        setCities(holidayResp.cityModule);
        setHolidayPlans(holidayResp.holidayModule); // you may filter data here
        setDate(holidayResp.holidayModule);
      }
    };
    
    getHolidayPlans();
  }, []);

  console.log(holidayPlans);

Answer 3

发生这种情况是因为当您使用useState挂钩时，您将 state 值holidayPlans和dateArray分配给本地常量（或变量，这无关紧要），并且每次渲染组件时都会分配这些值。 这意味着组件中的常量值不会立即更新，但会反映在下一次渲染中，这将由您在getHolidayPlans中执行的 state 更新触发。 这就是为什么如果您将console.log()调用放在getHolidayPlans之外，该值将被正确打印。

export const UpcomingHolidays = (props: UpcomingHolidaysProps) => {
  const [holidayPlans, setHolidayPlans] = useState([]);

  const [dateArray, setDate] = useState([]);

  useEffect(() => {
    getHolidayPlans();
  }, []);

  const getHolidayPlans = async () => {
    const holidayResp = await PortalHolidayService.getInstance().getHolidayPlans();
    if (holidayResp) {
      setCities(() => holidayResp.cityModule);
      setHolidayPlans(() => holidayResp.holidayModule);
      setDate(() => holidayResp.holidayModule);
    }
    // ...
  };

  console.log(holidayPlans);

基本上是这样的：

             First render
                  |
                  V
  useEffect executes getHolidayPlans()
                  |
                  V
getHolidayPlans() performs state changes,
     triggering a new render cycle
                  |
                  V
            Second render,
    which will have new state values

重要的是要注意，最后UpcomingHolidays只是一个 function，它的主体在每个渲染周期执行。

基于此，go 的推荐方法是使用调用方 function ( getHolidayPlans() ) 本地的常量/变量，而不是在调用各自的setState function 后立即使用 state 常量/变量，因为它们在完成后更新它被调用的 function。

export const UpcomingHolidays = (props: UpcomingHolidaysProps) => {
  const [holidayPlans, setHolidayPlans] = useState([]);

  const [dateArray, setDate] = useState([]);

  useEffect(() => {
    getHolidayPlans();
  }, []);

  const getHolidayPlans = async () => {
    const holidayResp = await PortalHolidayService.getInstance().getHolidayPlans();
    const holidayPlansLocal = holidayResp.holidayModule;
    if (holidayResp) {
      setCities(() => holidayResp.cityModule);
      setHolidayPlans(() => holidayResp.holidayModule);
      setDate(() => holidayResp.holidayModule);
    }
    let today = new Date();
    console.log(holidayPlansLocal);
    holidayPlansLocal.filter((date) => {
      const eventDate = new Date(date.event_date);
      console.log(eventDate);
    });
  };