Question

因此，我试图在点击发送按钮时在屏幕之间传递一些数据或项目。但是，我的“ _onPress”上的this.setState似乎可以正常工作，点击“发送”按钮后，警报将显示“未定义”。当我检查子屏幕时，我什么都不包含。

请帮助我知道我在这里想念的东西。

这是我的代码：

ModalScreen.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>
        )
    }
}

Settlement.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，但我已经尝试过了，但没有任何反应。

Answer 1

您没有将任何参数传递给_onPress中的ModalScreen.js，因此，当您单击该按钮时，会将两个状态属性都设置为undefined。

<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文档，则可以查看。

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

1 个答案: