时间戳

首页 > 解决方案 > React Native - setState 在传递数据时未定义

javascript - React Native - setState 在传递数据时未定义

问题描述

所以我试图在点击发送按钮时将一些数据或项目从一个屏幕传递到另一个屏幕。然而，我的“_onPress”上的 this.setState 似乎可以正常工作，点击发送按钮后，警报显示“未定义”。当我检查子屏幕时，我什么都没有。

请帮助我知道我在这里缺少什么。

这是我的代码：

模态屏幕.js

export default class ModalScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: props.modalVisible,
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            modalVisible: nextProps.modalVisible,
            OG_id: nextProps.id,          // This id and price came from another parent screen,
            OG_price: nextProps.price     // making the screen after this the grandchild.
        })
    }

_onPress = (OG_id, OG_price) => {
    this.setState({
        Set_id: OG_id,
        Set_price: OG_price
    });
    alert(OG_id, OG_price)
    console.log(this._onPressModal)
};

    render() {
        return (
            <View>
                <Modal
                animationType = 'slide'
                visible = { this.state.modalVisible }
                onRequestClose={() => { this.props.setModalVisible(false) }}>
                    <View>
                        <View>
                            <Text>{this.state.OG_id}</Text>
                            <Text>{this.state.OG_price}</Text>
                            <TouchableOpacity
                             onPress = { () => { this._onPress() } }>  // Send button
                                <Text>Send</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                             onPress = {() => { this.props.setModalVisible(false) }}>
                                <Text>Close</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Modal>
            </View>
        )
    }
}

结算.js

export default class Settlement extends Component {

    componentWillReceiveProps(nextProps) {
        this.setState({
            Det_id: nextProps.Set_id,
            Det_price: nextProps.Set_price
        })
    }

    render() {
        return (
            <View>
                <Text>Settlement</Text>
                <Text>{ this.state.Det_id }</Text>
                <Text>{ this.state.Det_price }</Text>
            </View>
        )
    }
}

截图：

模态屏幕

警报/未定义

沉降

编辑：

每当我在我的 Settlement.js 上将“prop”更改为“state”，然后在我的 ModalScreen.js 中声明，例如；

    <View>
        <Modal>
            <View>
                <View>
                     ....
                     ....
                </View>
                <Settlement
                Set_id = { this.state.OG_id }       // Settlement
                Set_price = { this.state.OG_price }
            />
            </View>
        </Modal>
    </View>

它确实显示了预期的数据，但它没有显示在预期的屏幕上，而是显示在屏幕上。我已经阅读了很多关于通过屏幕或组件传递数据的问题，我注意到一些开发人员建议使用 .bind 但我已经尝试过了，但没有任何反应。

在此处输入图像描述

标签： javascriptandroidreactjsreact-native

解决方案

您没有向_onPressin传递任何参数，ModalScreen.js因此当您单击该按钮时，您将两个状态属性都设置为未定义。

<TouchableOpacity onPress = { () => { this._onPress('some', 'data') } }>

此外，除非您要操作其中的数据，否则您Settlement.js可能只想将其保留为道具，而不是将其设置为状态。

// Settlement.js
export default class Settlement extends Component {

    render() {
        return (
            <View>
                <Text>Settlement</Text>
                <Text>{ this.props.Det_id }</Text>
                <Text>{ this.props.Det_price }</Text>
            </View>
        )
    }
}

我没有看到任何TextInput，但如果您尝试设置一个，请查看TextInput文档。

推荐阅读