React Native - Модальный с элементами Flatlist

Question

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

Я фактически закончил всплывающее окно модального режима, теперь я должен показать подробности, такие как описание меню и цена меню.Я нашел сообщение здесь в stackoverflow, и я отслеживаю все там, но у меня возникает ошибка, связанная с «id», и я не могу понять, как это исправить.

Вот мой код

Details.js

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, Modal, TextInput, TouchableWithoutFeedback, Keyboard
} from 'react-native';

import AddModal from '../Modal/AddModal';

var screen = Dimensions.get('window');

const DismissKeyboard = ({ children }) => (
    <TouchableWithoutFeedback onPress = {() => Keyboard.dismiss()}>
        {children}
    </TouchableWithoutFeedback>
);

export default class Details extends Component {
    static navigationOptions = {
        title: ''
    };
    constructor()
    {
        super ()
        this.state = {
            data: [],
            showModal: false,
            id: null,
        }
    }

    fetchData = async() => {
        const { params } = this.props.navigation.state;
        const response_Cat = await fetch('http://192.168.254.101:3307/categories/' + params.id);
        const category_Cat = await response_Cat.json();
        this.setState({data: category_Cat});
    };

    componentDidMount() {
        this.fetchData();
    };

    _onRefresh() {
        this.setState({ refreshing: true });
        this.fetchData().then(() => {
            this.setState({ refreshing: false })
        });
    };

    _onPressItem(id) {
        this.setState({
            modalVisible: true,
            id: id
        });
    }

    _renderItem = ({item}) => {
        return (
            <TouchableHighlight
                id = { item.menu_desc }
                onPress = { this._onPressItem(item.menu_desc) }
            >
                <View>
                    <Text>{ this.state.id }</Text>
                </View>
            </TouchableHighlight>
        )
    };

  render() {
    const { params } = this.props.navigation.state;
      return (
          <View style = { styles.container }>
            <AddModal
                modalVisible = { this.state.modalVisible }
                setModalVisible = { (vis) => { this.setModalVisible(vis) }}
                id = { this.state.id }
            />
              <FlatList
                data = { this.state.data }
                renderItem = { this._renderItem }
                keyExtractor={(item, index) => index}
                /*refreshControl = {
                    <RefreshControl
                        refreshing = { this.state.refreshing }
                        onRefresh = { this._onRefresh.bind(this) }
                    />
                }*/
              />
          </View>
      );
  }

}

const styles = StyleSheet.create({
...
})

//AppRegistry.registerComponent('Details', () => Details);

AddModal.js

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, TextInput, Modal
} from 'react-native';

export default class AddModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            id: null
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            showModal: nextProps.showModal,
            id: nextProps.id,
        })
    }

    render() {
        return (
            <Modal
                animationType="slide"
                transparent={ true }
                visible={ this.state.modalVisible }
                onRequestClose={() => { this.props.setModalVisible(false) }}>
                    <View>
                        <View>
                            <Text>{ this.state.id }</Text>
                            <TouchableHighlight
                                onPress = {() => { this.props.setModalVisible(false) }}
                            >
                                <Text>Hide Modal</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
            </Modal>
        )
    }
}

Answer 1

Просто хотел указать на проблему в вашем коде (не связано с ошибкой 'id', ошибка идентификатора уже отвечает digit).В функции renderItem вы звоните onPress = { this._onPressItem(item.menu_desc) }, ее следует изменить на

onPress = { () => this._onPressItem(item.menu_desc) }

Я полагаю, вы вызовете onPressItem, когда пользователь нажмет на элемент списка.

РЕДАКТИРОВАТЬ:

Я сделал несколько изменений, чтобы ваш код работал.Вот изменения.

В вашем AppModal.js вы устанавливаете модальную видимость в showModal: nextProps.showModal, но в <Modal ...> вы установили visible = { this.state.modalVisible }.Также в Details.js вы написали <AddModal modalVisible ...>.

Сначала я изменил showModal на modalVisible в Details.js и в AppModal.js.

Подробности.js

constructor()
{
    super ()
    this.state = {
        data: [],
        modalVisible: false,
        id: null,
    }
}

Затем я изменил _onPressItem(id) на _onPressItem = (id)

Внесены изменения в renderItem как

<TouchableHighlight
   id = { item.enName }
   onPress = { () => this._onPressItem(item.enName) }
>

в render функцииЯ установил модальную видимость как

<AddModal
  ...
  setModalVisible = { (vis) => { this.setState({
     modalVisible: vis
   })
  }}
  ...
/>

AppModal.js

Изменено showModal на modalVisible

constructor(props) {
  super(props);
  this.state = {
    modalVisible: props.modalVisible,
    d: null
  };
}

componentWillReceiveProps(nextProps) {
  this.setState({
    modalVisible: nextProps.modalVisible,
      id: nextProps.id,
  })
}

В конструктореЯ добавил modalVisible: props.modalVisible.

Надеюсь, это поможет!

Answer 2

Я думаю, item.menu_desc - это идентификатор каждого элемента, поэтому он должен быть {item.menu_desc}, а не {id}.Измените это как ниже

_renderItem = ({item}) => {
        return (
            <TouchableHighlight
                id = { item.menu_desc }
                onPress = { this._onPressItem(item.menu_desc) }
            >
                <View>
                    <Text>{ item.menu_desc }</Text>
                </View>
            </TouchableHighlight>
        )
    };