当前一个状态在组件方法的关闭中时，如何处理 React.js hooks 中的 case？

Question

I have a component which waits for an API call, sets an empty array as initial state and then on props change it sets the new array.

const [options, setOptions] = useState([]);

useEffect(() => {
 setOptions(optionsFromProps);
}, [optionsFromProps]);

The problem is, that I have a function inside of the component which has closure over the first empty array and when I call it, it's being called with empty array event though now options is [{}, {}, {}];

// inside of the same component
const foo = () => console.log(options);
// it logs []
// if the initial state would be [1,2,3] then it logs [1,2,3]

Answer 1

After an additional discussion over the problem with my colleague, he pointed out that I haven't understood the problem. Basically, the initial question is incorrect and the bug was because in the child component I attached an event listener which had closure over the initial state.

CodeSundbox example

So after this, the fix was obvious: on every rerender, the function should be updated, not only on the initial render.

import React, { useState, useEffect } from "react";

const Component = () => {
  const [options, setOptions] = useState([]);

  useEffect(() => {
    const onMouseDown = () => {
      foo();
    };
    document.addEventListener("mousedown", onMouseDown);
    return () => document.removeEventListener("mousedown", onMouseDown);
  }); // fixed
  // }, []); with a bug

  const foo = () => {
    setOptions(options);
  };

  const handleClick = () => {
    setOptions([1, 2, 3]);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
      <ul>
        {options.map(option => (
          <li>{option}</li>
        ))}
      </ul>
    </div>
  );
};

export default Component;