时间戳

首页 > 解决方案 > ReactNative useEffect Parent to Child 数据刷新

reactjs - ReactNative useEffect Parent to Child 数据刷新

问题描述

useEffect 导致我在获取数据和能够使用最新数据重新加载弹出窗口时出现一些问题，但它没有被更新。

  1. ScreenA 获取数据并将数据加载到 SamplePopup - OK
  2. SamplePopup 能够获取并呈现此数据 - 好的
  3. 在 SamplePopup 上，您按下一个按钮以触发刷新到 ScreenA - OK
  4. ScreenA 获取新数据（OK），但现在 SamplePopup 没有获取此新数据 - 失败

关于如何从其父 ScreenA 获取 SamplePopup 最新数据的任何想法？

const ScreenA = ({navigation, route}) => {
  const [showPopup, setShowPopup] = useState(false);
  const [data, setData] = useState({
    refreshing: false,
    fruits: [],
    vegetables: []
  });

  useEffect(() => {
    retrieveData();
  }, [data.refreshing]);

  retrieveData = async () => {
    let incomingFruits = [];
    let incomingVegetables = [];

    try {
      const response = await fetch('api/fruits');
      let json = await response.json();

      incomingFruits = json.fruits;
    } catch (error) {

    }

    try {
      const response = await fetch('api/vegetables');
      let json = await response.json();

      incomingVegetables = json.vegetables;
    } catch (error) {
      
    }

    setData({
      refreshing: false,
      fruits: incomingFruits,
      vegetables: incomingVegetables
    });
  }

  const refresh = () => {
    retrieveData()
  }

  return (
    <SafeAreaView style={{flex: 1}}>
      {
        showPopup ? 
        <SamplePopup 
          onPress={() => refresh()}
          data={data}
          showPopup={showPopup}
          refreshing={data ? data.refreshing : false} /> 
        : null
      }
      <TouchableWithoutFeedback onPress={() => setShowPopup(true)}>
        <View >
          <Text style={{paddingLeft: 5}}>Show Popup</Text>
        </View>
      </TouchableWithoutFeedback>
    </SafeAreaView>
  )
}

// SamplePopup

const SamplePopup = (props) => {
  useEffect(() => {
    console.log('data refresh')
    console.log(props.data)
  }, []);

  onRefresh = () => {
    props.onPress('REFRESH');
  }

  return (
    <Modal
      animationIn="slideInRight"
      animationOut="slideOutRight"
      isVisible={props.showPopup}>
      <View style={{flex: 1}}>
        <TouchableWithoutFeedback onPress={() => onRefresh()}>
          <View >
            <Text style={{paddingLeft: 5}}>Fetch new data</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    </Modal>
  )
}

标签： reactjsreact-nativereact-hooks

解决方案

我在这里添加建议，因为它有点长并且包含代码

数据正在更新，它只是日期你正在尝试里面的日志

useEffect(() => {
    console.log('data refresh')
    console.log(props.data)
  }, []);

此 useEffect 的回调将仅在第一次渲染后运行一次。尝试在 useEffect 之外打印值。您将获得更新的数据。

谢谢。让我知道它是否解决了您的问题。

推荐阅读