使用导航触发功能组件的刷新（React Native）

Question

我的应用程序中的一个屏幕是一个功能组件，如下所示：

export default function DonationsScreen({ navigation }) {
  const [requests, setRequests] = useState("")

  useEffect(() => {
    if (!requests) {
      getRequests()
    }
  }, [])

  // I omit some of the code here

  return (
    <SafeAreaView>
      <SearchBar lightTheme placeholder="Type Here..." />
      <FlatList
        data={requests}
        renderItem={({ item }) =>
          item.donationsLeft > 0 ? (
            <DonationItem request={item} navigation={navigation} />
          ) : null
        }
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  )
}

class DonationItem extends React.Component {
  render() {
    const { navigate } = this.props.navigation
    return (
      <Card title="hello">
        <Button
          buttonStyle={styles.donateButton}
          onPress={() =>
            this.props.navigation.push("Realizar donación", {
              request: this.props.request,
            })
          }
          title="Donar"
        />
      </Card>
    )
  }
}

这样您在 DonationItem 中看到的 onPress 就会导航到另一个名为 DonationFormScreen 的屏幕。 此屏幕中的内容并不重要，只是在其中一个方法中调用了另一个导航：

this.props.navigation.push('Donación confirmada', {comingFrom: this.state.comingFrom});

最后，“Donación confirmada”是一个屏幕 DonationConfirmationScreen：

export default class DonationConfirmationScreen extends React.Component {

    render() {

        return(
        <View style={styles.confirmation}>
            <View style={styles.confirmationContent}>
                <Ionicons name='ios-checkmark-circle' color={'green'} size={130}/>
                <Button
                buttonStyle={styles.button}
                title='Listo' 
                onPress={() => this.props.navigation.navigate("Pedidos")}
                />
            </View>
        </View>
        );
    }
}

如您所见， this.props.navigation.navigate("Pedidos")在按钮内被调用并且工作正常。 我想要做的不仅是导航回“Pedidos”（这是我的 DonationsScreen），而且还触发某种刷新，因为我需要再次调用 getRequests()。 我怎样才能做到这一点？

Answer 1

感谢所有回答的人，但我最终使用了其他东西，因为我无法让其他东西发挥作用。

const isFocused = useIsFocused();

const [requests, setRequests] = useState('');

useEffect(() => {
  getRequests();
} , [isFocused])

如您所见，我最终使用了 isFocused。 我不得不添加这个导入：

import { useIsFocused } from '@react-navigation/native';

Answer 2

在您的情况下，您可以将方法getRequests与请求一起传递，例如替换DonationItem组件中的这一行：

onPress={() => this.props.navigation.push('Realizar donación', {request: this.props.request})}

有了这条线：

onPress={() => this.props.navigation.push('Realizar donación', {request: this.props.request, getRequests: getRequests})}

并继续传递它直​​到到达目标屏幕，然后在完成后调用方法getRequests 。

可选：考虑使用状态管理库来避免这些问题，例如： https : //github.com/ctrlplusb/easy-peasy

Answer 3

挂载查询请求

export default function DonationsScreen({ route, navigation }) {  
  const { getRequests } = route?.params

  useEffect(async () => {
    if (getRequests) {
      const req = await getRequests() 
      setRequests(req)
    }
  }, [])

也许将动态 getRequests 作为route.param

onPress={() => { 
  this.props.navigation.push('Realizar donación', {
    request: this.props.request, 
    getRequests: getRequests
  })
}