React Native - передача данных выборки в Modal и использование StackNavigator с Modal

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 }
        />
    )
  }

Но это не сработало.Я собираюсь получить данные и передать их на мой Модальный .

Образец

Мой Второй вопрос: после передачи некоторых данных в модал, я нацеливаюсь на переход к другому экрану / представлению из моего модала.

вот мой код

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

Здравствуйте. Я не слишком использую, чтобы реагировать на нативные, но я думаю, что это то же самое, что и реагировать, для решения вашей проблемы, я думаю, вы должны использовать повторно используемый компонент.затем создать, а затем передать ваши данные в качестве реквизита.

Вот пример в реагировании.

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