React Native - передача состояний от родителя к ребенку и внуку

Question

Здесь я пытаюсь передать состояние из родительского компонента / экрана ребенку и внуку. Сначала я попробовал его с Text , который объявлен в View , и он работает, но когда я удаляю Text в View и объявите в navBar, что это дает мне ошибку.

А также отправка состояния от ребенка к внуку не работает, даже если я объявляю состояние только в Представлении с Текстом . (Как я делал в первый раз )

Вот мой код

table.js (родитель)

export default class tables extends Component {
    state = {
        data: [],
    }    
    fetchData = async () => {
        const response = await fetch("http://192.168.254.104:3308/table/");
        const json = await response.json();
        this.setState({ data: json })
    }    
    componentDidMount() {
        this.fetchData();
    }    
    render() {
        return (
            <View>
                <FlatList
                ....
                renderItem = {({ item }) => 
                    <TouchableOpacity
                    onPress = { () => this.props.navigation.navigate('Category', { tbl: item.tbl_id })}>
                        <Text>{ item.tbl_id }</Text>   // the data that will be pass.
                    </TouchableOpacity>
                }
                />
            </View>
        )
    }
}

Category.js (Ребенок)

export default class Category extends Component {
    static navigationOptions = ({ navigation }) => (
        {
            headerLeft:
            <Text>Table NO: { this.state.tbl }</Text>   // navBar
        }
    );
    constructor(props){
    super(props)
        this.state = {
            data: [],
            tbl: this.props.navigation.state.params.tbl,
        };
    }
    render() {
        return (
            <View>
                <Text>{ Table NO: { this.state.tbl }</Text>  // But if I do it this way it's working fine.
                <FlatList
                ....
                renderItem = {({ item }) => 
                    <TouchableOpacity
                    onPress = { () => this.props.navigation.navigate('Dishes', { id: item.cat_id}, { tbl: item.tbl_id }) }>
                        <Text>{ item.cat_name }</Text>
                    </TouchableOpacity>
                }
                />
            </View>
        )
    }
}

Dishes.js (GrandChild)

export default class Dishes extends Component {
    static navigationOptions = ({ navigation }) => (
            {
                headerLeft:
                <Text>Table NO: { this.state.tbl }</Text>   // navBar
            }
        );
    constructor(props) {
        super (props)
        this.state = {
            tbl: this.props.navigation.state.params.tbl,
        }
    }
    render() {
        return (
            <View>
                <Text>Table NO: { this.state.tbl }</Text>  // In here, even if I do it this way it's not working. :-/
                <FlatList
                ....
                />
            </View>
        )
    }
}

Answer 1

Попробуйте напечатать идентификатор таблицы вместо

<Text>{ item.cat_name }</Text>

изменить с

<Text>{ item.tbl_id }</Text>

И проверьте, что там печатается, если значение верное, оно также должно быть передано в большой дочерний класс, как подсказал @hansn

используйте это как

onPress = { () => this.props.navigation.navigate(
    'Dishes', { id: item.cat_id,  tbl: item.tbl_id }
)}

Answer 2

В onPress TouchableOpacity в Category.js вы передаете 3 параметра в this.props.navigation.navigate, но похоже, что вы должны передать 2. Попробуйте изменить строку на этот

onPress = {
    () => this.props.navigation.navigate("Dishes", {
        id: item.cat_id,
        tbl: item.tbl_id
    })
}