Question

在这里我有两个问题。首先是我要从我的 api 获取圆顶数据，然后在点击按钮时将此数据传递给模式。我尝试使用“状态”，然后像声明该状态一样；

  constructor(props){
    super(props)
    this.state = {
      tbl: [],
      tbl_no: null,
    }
  }
  fetchTblOccpd = async () => {
    const response = await fetch('http://192.168.***.***:****/PndngVRoutes/Occupied/');
    const json = await response.json();
    this.setState({ tbl: json })
    this.setState({ tbl_no: json })
  }
  render() {
    return (
        .....
        <PndModal
          modalVisible = { this.state.modalVisible }
          setModalVisible = { (vis) => { this.setState({ modalVisible: vis }) }}
          tbl_no         = { this.state.tbl_no }
        />
    )
  }

但这没用。我的目标是获取数据并将其传递给我的 Modal 。

样品

我的第二问题是在将一些数据传递给模态后，我的目标是从模态中导航到另一个屏幕/视图。

这是我的代码

export default class PndModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pnd_Data: [],
            modalVisible: props.modalVisible,
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            modalVisible: nextProps.modalVisible,
            tbl_no: nextProps.tbl_no,    //This is the data I'm trying to pass.
        })
    }
    fetchOrdered = async () => {
        const response = await fetch("http://192.168.254.***:****/PndngVRoutes/PendingView/" + this.state.tbl_no);
        const json = await response.json();
        this.setState({ pnd_Data: json })
      }
      componentDidMount() {
        this.fetchOrdered();
      }
    _onPressItem = () => {
        this.setState({
            modalVisible: false,
        });
    }
    render() {
        return (
            <Modal>
                <View>
                    <View>
                        <View>
                            <Text>Table No: { this.state.tbl_no }</Text>
                            <FlatList
                                data = {this.state.pnd_Data}
                                numColumns = { 2 }
                                keyExtractor={(item, index) => index.toString()}
                                renderItem = {({ item }) =>
                                    <View>
                                        <Text>{ item.menu_name }</Text>
                                    </View>
                                }
                            />
                            <TouchableOpacity
                            onPress = { () => this.props.navigation.navigate('pend') }>      // This is my navigation code
                                <Text>Add Order</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }
}

Answer 1

您好，我不太习惯于对本机进行响应，但是我认为它必须与react相同，为了解决您的问题，我认为您应该使用可重用组件。然后创建，然后将您的数据作为道具传递。

这是反应中的一个例子。

//My reusable component
    const Modal=(props) =>{


            return (

              <div>
                {props.data}
              </div>



            );
        }


    }

然后调用可重用组件，然后将结果从api传递给它。

<Modal
       data ={this.state.pnd_Data}   
  />

对于第二个问题，您只需添加可导航的链接即可....毫无问题。

您可以在此处了解有关可重用组件的信息 https://itnext.io/react-component-class-vs-stateless-component-e3797c7d23ab

React Native-将获取数据传递给Modal并将StackNavigator与Modal一起使用

1 个答案: