Reactjs 为什么这个 React 组件会导致无限渲染

我有以下父组件和子组件:

function Child({initialValues, onChange}) {

    const [count, setCount] = useState(0);
    const [values, setValues] = useState([]);

    const handleChange = () => {
      const next = count + 1;
      const curr = [...values];
      curr.push(next);
      setValues(curr);
      setCount(next);
    };

    useEffect(() => {
      onChange(values);
    }, [values]);

    useEffect(() => {
      const curr = [...values];
      initialValues.forEach(x => {
        curr.push(x);
      });
      setValues(curr);
    }, [initialValues]);


    return (
      <View>
        {values.map(v => <Text key={v}>{v}</Text>)}
        <Button onPress={handleChange}>Add</Button>
      </View>
    );
}



function Parent() {

    const [childState, setChildState] = useState([]);

    const handleMasterChange = (values) => {
      setChildState(values);
    };

    return (
      <Child initialValues={[4, 5]} onChange={handleMasterChange} />
    );
}

出于某种原因，当我在父组件中设置子状态时，它会导致无限的桶.

如果我删除父组件上的setChildState(Values)函数，它就能正常工作. 另外，如果我删除子组件上的InitialValues useEffect，它也可以正常工作. 问题是我两者都需要. 有什么主意吗？还有什么 Select 可以让它工作得很好吗？