react-native - 在 React-Native + hooks : updating parent's value multiple times in a row from a child component

Question

目标是创建一个输入组件，用户可以在其中单击一个按钮，如果按住该按钮，将多次触发一个 Action (例如，此处考虑一个 + 按钮，它将不断增加父级的值)。释放按钮时停止发射。
下面的代码是突出所需基础设施(父/子)和我面临的问题的最少代码。
问题:按下时，count value 只增加一次，尽管增量器被多次触发。 parent 同时拥有 count值和 onChange回调(沿 <TextInput> 模式)
我相信它来自 value在 incr()设置为 MyInput 处的值渲染时间；只要不松开按钮，MyInput不会重新渲染，因此增量器仍然绑定(bind)到原始 value .
父组件:

const Screen = ({}) => {
  const [ count, setCount ] = useState(0);
  
  const onChange = (value) => {
    setCount(value);
  }
  
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Parent: [{count}]</Text>
      <MyInput value={count} onChange={onChange}/>
    </View>
  )
}

子组件: MyInput关注 <TextInput>和类似的模式，其中 value由父级拥有并通过 onChange 更新打回来

export const MyInput = ({ value, onChange }) => {
  const [ timer, setTimer ] = useState(null);

  const incr = () => {
    const nv = value + 1;
    console.warn(new Date(), `nv: ${nv}`);
    onChange(value + 1);
  }

  const onPressIn = () => {
    setTimer(setInterval(incr, 10));
    // or calling incr() twice here, would have the same effect
  };

  const onPressOut = () => {
    clearInterval(timer);
  };

  return (
    <View>
      <Text>Child: {value}</Text>
      <TouchableOpacity
        onPressIn={onPressIn}
        onPressOut={onPressOut}>
        <Text>+</Text>
      </TouchableOpacity>
    </View>
  )
};

如果我使用值的本地状态副本(例如 [ localValue, setLocalValue ] = useState(value) 中的 MyInput 和使用 setLocalValue(xxx => xxx+1) ，我可以部分解决这种情况……但是它只会更新本地值而不是父值。
也许强制刷新也是一个(坏)选择？
我尝试使用 useCallback/... 但是，看起来，我需要在重新渲染父级(或类似的东西)之前释放按钮。
约束是:功能组件和 Hook 以及 value/onChange parent 拥有的 Prop
知道如何解决上述情况吗？
提前感谢任何提示

Answer 1

import {useEffect}from 'react'

export const MyInput = ({ value, onChange }) => {
  const [timer, setTimer] = useState(null);

const incr = () => {
    const nv = value + 1;
    // console.warn(new Date(), `nv: ${nv}`);
    onChange(value + 1);
}
useEffect(() => {
    incr()
    setTimer(setInterval(incr, 10));
}, [value])
const onPressIn = () => {
    // setTimer(setInterval(incr, 10));
    // or calling incr() twice here, would have the same effect
    onChange(value + 1);
};

const onPressOut = () => {
    clearInterval(timer);
};
  return (
    <View>
      <Text>Child: {value}</Text>
      <TouchableOpacity
        onPressIn={onPressIn}
        onPressOut={onPressOut}>
        <Text>+</Text>
      </TouchableOpacity>
    </View>
  )
};