在反应功能组件中初始化助手 class

Question

从功能组件作为参数传递的 class 方法被保留 'in memory' 并且不反映更新后的状态。我可以重新初始化状态更改，但希望避免它。

const MyFunctional = (props) => {
    const [state,setState] = useState(0);

    const helper = useRef();

    useEffect(()=>{
        helper.current = new HelperClass(onSuccess,onFailure);
    },[])
    
    /* wish to avoid */

     useEffect(()=>{
        helper.current = new HelperClass(onSuccess,onFailure);
    },[state])



    const onSuccess = (result) =>{
       
       /* Here state == 0 */

    }

    const onFailure = (error) =>{
       /* Here state == 0 */

    }
}

Answer 1

您需要一个额外的 ref 才能在异步回调中使用最新的值。

两者都

grab react-use's useLatest勾,
write one yourself according to the docs,

或者窃取这个简单的参考实现：

function useLatest(value) {
  const ref = useRef(value);
  ref.current = value;
  return ref;
};

const MyFunctional = (props) => {
  const [state, setState] = useState(0);
  const latestStateRef = useLatest(state);
  const helper = useRef();
  useEffect(() => {
    helper.current = new HelperClass(onSuccess, onFailure);
  }, []);

  const onSuccess = (result) => {
    console.log(latestStateRef.current);
  };

  const onFailure = (error) => {
    console.log(latestStateRef.current);
  };
};

在反应功能组件中初始化助手 class

Initialise helper class in a react functional component

javascript

react-native

react-functional-component