将 state 数据从子级传递到嵌套组件

Question

const Child = ({ ChildIndex }) => {
  const [index, setIndex] = useState();

  <FlatList
    contentContainerStyle={styles.contentContainer}
    ref={flatListRef}
    scrollEnabled
    showsVerticalScrollIndicator={false}
    data={videos}
    onMomentumScrollEnd={(e) => {
      setIndex(Math.round(e.nativeEvent.contentOffset.x / width));
    }}
    onEndReachedThreshold={Platform.OS === "ios" ? 0 : 1}
  />;
};

const Parent = () => {
  const [currentChildIndex, setCurrentChildIndex] = useState();
  <Child ChildIndex={ChildIndex} />;
};

我想在父组件中获取更新的currentChildIndex 。 它在第一次加载时显示索引，但之后不会更新。 试图查看 useState 钩子但不是运气

Answer 1

您只需要传递setCurrentChildIndex即可：

const Parent = () => {
  const [currentChildIndex, setCurrentChildIndex] = useState();
  useEffect(() => {
    console.log("CurrentChildIndex has been updated", currentChildIndex);
  }, [currentChildIndex]);
  return <Child setCurrentChildIndex={setCurrentChildIndex} />;
};

并在您的Child组件中使用它而不是setIndex

const Child =({setCurrentChildIndex})=>{


    <FlatList
      contentContainerStyle={styles.contentContainer}
      ref={flatListRef}
      scrollEnabled
      showsVerticalScrollIndicator={false}
      data={videos}
      onMomentumScrollEnd={e => {
      setCurrentChildIndex(Math.round(e.nativeEvent.contentOffset.x / width));
    }} 
    onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 1}
    />
/>
}