React useState钩子中对象offset属性累加更新失效问题求助

The core issue here is likely related to stale state references or unintended state overwrites elsewhere in your component. Here's how to fix and troubleshoot it:

• Confirm proper state initialization
  Ensure paramsData is initialized as a React state variable with the correct starting offset:

  const [paramsData, setParamsData] = useState({ offset: 0, /* other initial properties */ });
  

• Check for external state modifications
  Verify no other part of your component (or parent components) is directly mutating the offset property (without using setParamsData) or resetting the entire paramsData state. Direct mutation breaks React's reactivity and causes unexpected behavior.

• Adjust dispatch timing (optional but recommended)
  Currently, you're dispatching contentList with the current paramsData (before the offset increment). If you want the dispatch to use the updated offset, calculate it upfront or use useEffect to sync with state changes:

  const handleContentData = () => {
    setHasMore(false);
    const nextOffset = paramsData.offset + 24;
    dispatch(contentList({ ...paramsData, offset: nextOffset }));
    setParamsData(prevState => ({
      ...prevState,
      offset: prevState.offset + 24
    }));
    setHasMore(true);
  };
  

  Alternatively, use useEffect to dispatch after state updates:

  useEffect(() => {
    if (!hasMore) {
      dispatch(contentList(paramsData));
      setHasMore(true);
    }
  }, [paramsData, hasMore, dispatch]);
  
  const handleContentData = () => {
    setHasMore(false);
    setParamsData(prevState => ({
      ...prevState,
      offset: prevState.offset + 24
    }));
  };
  

• Validate function memoization
  If wrapping handleContentData with useCallback, include all necessary dependencies to avoid stale closures. The functional update pattern you're using already guards against stale paramsData references, but proper memoization ensures the function uses the latest values:

  const handleContentData = useCallback(() => {
    setHasMore(false);
    dispatch(contentList(paramsData));
    setParamsData(prevState => ({
      ...prevState,
      offset: prevState.offset + 24
    }));
    setHasMore(true);
  }, [dispatch, paramsData, setHasMore]);
  

The functional update pattern (prevState => ...) you're using is the correct approach for incrementing state based on its previous value. The most likely culprit is external state interference or incorrect dispatch timing.

内容的提问来源于stack exchange，提问作者Navid Yazdani