hay unos tres componentes más entre este y el que quiero que funcione, así que sigo pasándolo como accesorio hasta que llego al componente que quiero. se supone que se ejecuta cuando el usuario hace clic en un botón, pero aparece un error de que this.props.route.params.ToggleFavorites no es una función, ¡ayuda!
constructor(props){ super(props) this.state = { hymnNumber: '', favorites: [] } } Sort = () => { let x = [...this.state.favorites] for(let i=0; i<x.length-1;i++){ if(parseInt(x[i+1].slice(0,2)) < parseInt(x[i].slice(0,2))){ let y = x[i] x[i] = x[i+1] x[i+1] = y this.Sort() } } this.setState({favorites: [...x]}) } ToggleFavorites = (id) =>{ const item = ContentData.filter(item => item.slice(0, 2) === id) let arr = [...this.state.favorites] if(arr.includes(item[0]) === false){ arr = [...arr, ...item] }else{ arr = arr.filter(favorite => favorite === item[0]) } this.setState({favorites: [...arr]}) this.Sort() } clearAll = () =>{ this.setState({favorites: []}) } render(){ return ( <View> <Pressable style={styles.buttonStyles} onPress = {() => this.props.navigation.push('Favorites', {favorites: this.state.favorites, clearAll: this.clearAll})}> <Text style={styles.buttonText}>favorites</Text> </Pressable> <Pressable style={styles.buttonStyles} onPress={() => this.props.navigation.push('Search', {favorites: this.state.favorites, ToggleFavorites: this.ToggleFavorites})}> )}}```Si lo está pasando como accesorio, no estará en los parámetros de ruta, solo estará en los accesorios en el nivel superior (es decir this.props.ToggleFavorites ). Los parámetros de ruta solo se completan con la navegación (es decir, cuando llamas a navigation.navigate('screen', {data: 'hi'}) , obtendrás {data: 'hi'} en this.props.route.params) .
En lugar de pasar la función a tantos niveles, considere usar la composición en su lugar. Cuando se usa correctamente, este patrón eliminará la repetición y reducirá el área de superficie de error. https://plainenglish.io/blog/how-to-avoid-prop-drilling-in-react-using-component-composition
Otra opción es almacenar la función en un Contexto, aunque eso tiene más advertencias y debe usarse con cuidado. https://reactjs.org/docs/context.html