使用導航觸發功能組件的刷新（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
  })
}