Question

在这里，我试图将状态从父组件/屏幕传递给子代和大子代。首先，我尝试使用在视图中声明的文本进行尝试，并且可以正常工作，但是当我在查看并在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 （大孩子）

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

在Category.js的Rename-Item的TouchableOpacity中，您将3个参数传递给Rename-Item -LiteralPath $file.FullName -NewName $filenew -WhatIf，但似乎您应该传递2个参数。尝试将行更改为此

onPress

Answer 2

尝试打印表格ID代替

<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 3

在父母中：

onPress = { () => this.props.navigation.navigate('Child', {

             params: { id: item.cat_id,  tbl: item.tbl_id }

          }
)}

在孩子中：

const {id, tbl} = this.props.navigation.getParam('params');

onPress = { () => this.props.navigation.navigate('GrandCHild', {

                 params: { id, tbl}

          }
)}

在大孩子中：

const {id, tbl} = this.props.navigation.getParam('params');

React Native-将状态从父级传递到子级和孙级

3 个答案: