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

【问题标题】：React Native - Passing fetch data to Modal and using StackNavigator with ModalReact Native - 将获取数据传递给 Modal 并将 StackNavigator 与 Modal 一起使用
【发布时间】：2018-09-20 12:13:19
【问题描述】：

在这里我有两个问题。首先是我试图从我的 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。

样本

我的第二个问题是在将一些数据传递给 Modal 之后，我的目标是从我的 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>
        )
    }
}

【问题讨论】：

同时回答这两个问题有点困难。那么从第一个开始，什么不起作用？
在我的第一个问题中，我试图从我的 api 中获取一些数据，然后在点击按钮时在屏幕上查看它——数据应该以模式传递。现在，就我而言，它不是。我不确定我的获取代码是错误的还是在我的模式代码中。
点击按钮时是否显示模态？如果是，模态是否显示任何数据或根本不显示任何数据？
先生，它根本没有，有时它会显示错误； “不变违规：对象作为 React 子对象无效（找到：带有键 {tbl_id} 的对象）。如果您要渲染子对象集合，请改用数组。”
就您的响应而言，这表明您正试图直接从 json 呈现响应，即 {json} 而不是 ex。 {json.tbl_id}

标签： javascript android reactjs react-native mobile

【解决方案1】：

你好我不太习惯 react native 但我认为它必须与 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

【讨论】：