我可以在闭包中获取变量的更新值吗？

Question

Note: React App.

I'm not sure if this is possible, but I have a function that sets up an object with keys that hold a set of numbers and returns an updater function.

I have 3 components that call this on click on a number matrix, and if I log the result of the return of that function call then and there, I get the updated object of set values back.

function App() {

  const fn = (keys) => {
    const obj = {};
    // loop through keys to create -> obj = { [key]: new Set() };

    const updater = (num, key) => {
        obj[key].has(num) ? obj[key].delete(num) : obj[key].add(num);
        return obj;
    }

    return updater;
  }

  // initialize
  const updateFn = fn(['key1', 'key2', 'key3']);

  // correctly update the sets values and return ALL updates on change
  const updateAndLog = (num, key) => console.log(updateFn(num, key)) 

  // But when I try to call it from elsewhere in a callback to send to an api such as:
  const handleSend = () => {
    console.log(updateFn(0, 'key1')) // { key1: {0}, key2: {}, key3: {} };
  }

  return (
    <>
      <Component index={1} handleUpdate={updateAndLog} .. />
      <Component index={2} handleUpdate={updateAndLog} .. />
      <Component index={3} handleUpdate={updateAndLog} .. />
      <button onClick={handleSend}>Send Data</button>
    </>
  )

}

It returns empty, and with a new object with just that 0 stored in the first key. Now, I know I could store these in state as I go, but I'm trying to avoid that in this scenario.

If you have any recommendations on how this might be achieved would be great!

Thanks

Answer 1

Your updateFn gets recreated every time the component renders.

So you could do this to prevent it from being recreated.

const updateFnRef = useRef(fn(['key1', 'key2', 'key3']))
const updateFn = updateFnRef.current;