React Native - Почему отображение компонентов с помощью итерации дает id prop в качестве номера последней итерации всем компонентам? - PullRequest
Новая
       4

React Native - Почему отображение компонентов с помощью итерации дает id prop в качестве номера последней итерации всем компонентам?

1 голос
/ 23 марта 2020

Я получаю некоторые данные с моего сервера и затем отображаю их через итерацию. Ниже приведен код: 

    function DisplayMenu(MenuText, defaultThis) {
        var menu = JSON.parse(MenuText);
        var CategoriesNum;
        CategoriesNum = menu.length;

        var i;
        var components = [];
        for (i = 1; i < CategoriesNum + 1; i++) {
            var temp = <View style={styles.category}>
                <Text style={styles.catTitle}>{menu[i - 1][i.toString()]["catTitle"]}</Text>
                <View style={styles.catItems}>
                    {generateItemC(menu, i, defaultThis)}
                </View>
            </View>;
            components[i] = temp;
        }
        return (
            <View>{components}</View>

        )
    }

    function generateItemC(menu, catNumber, defaultThis) {
        var ItemsNum;
        ItemsNum = menu[catNumber - 1][catNumber.toString()]["itemsarray"].length;

        var i;
        var thisi;
        var items = []
        for (i = 0; i < ItemsNum; i++) {
            thisi = i;
            var temp =
                <View style={styles.iteminfo}>

                    <TouchableWithoutFeedback key={"item_" + i} id={i} onPress={() => { defaultThis.setModalVisible1(true, catNumber, thisi ); }}>
                        <View style={styles.item}>

                            <View style={styles.itemImgPos} >
                                <Image style={styles.itemImg} source={require('./img/burger.jpg')}></Image>
                            </View>
                            <Text style={styles.itemTitle}>{menu[catNumber - 1][catNumber.toString()]["itemsarray"][i]["title"]}</Text>
                            <Text style={styles.itemDesc}>{menu[catNumber - 1][catNumber.toString()]["itemsarray"][i]["desc"]}</Text>
                            <View style={styles.itemBottom}>
                                <Text style={styles.price}>{menu[catNumber - 1][catNumber.toString()]["itemsarray"][i]["price"]} • </Text>
                                <Icon name="clockcircleo" family="AntDesign" color="orange"></Icon>
                                <Text style={styles.colored} color="orange">15 min</Text>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>

                </View>;
            items[i] = temp
        }
        return (items)
    }
export default class Menu extends React.Component {
    getMenu() {
        var menu = JSON.parse(this.props.route.params['menu']);
        return menu;
    }
    state = {
        modalVisible1: false,
        modalVisible2: false,
        checked: 'first',
        isShowToast: false,
        isShowToastError: false,
        menuData: this.getMenu(),
        catNumber: 1,
        itemNumber: 1
    };

    setModalVisible1(visible, catNum, itemNum) {
        console.log(visible);
        console.log("catNum" + catNum);
        console.log("itemNum" + itemNum);
            this.setState({ catNumber: catNum, itemNumber: itemNum }, () => {
                this.setState({modalVisible1 : true})});
        }
...

По какой-то причине «Категории» действительно получают правильный номер итерации (id), когда я console.log, а «Предметы» - нет. Все элементы получают номер последней итерации. Мне нужно передать идентификатор элемента в функцию onPress, чтобы обновить состояние, чтобы отобразить правильные данные на модале.

Я запускаю функцию «DisplayMenu ()», например, в компоненте рендеринга: 

{DisplayMenu(this.props.route.params['menu'], this)}

Теперь мне было интересно, почему это происходит и как я могу передать идентификатор элемента в функцию onPress setModalVisible1? Модал появляется, но содержит неверные данные. Любая помощь будет высоко ценится:)

1 Ответ

0 голосов
/ 23 марта 2020

Вы можете использовать Array.prototype.map:

function generateItemC(menu, catNumber, defaultThis) {
  const ItemsNum =
    menu[catNumber - 1][catNumber.toString()]['itemsarray']
      .length;
  return ItemsNum.map((item, index) => (
    <View style={styles.iteminfo} key={index}>
      <TouchableWithoutFeedback
        key={'item_' + index}
        id={index}
        onPress={() => {
          defaultThis.setModalVisible1(
            true,
            catNumber,
            index
          );
        }}
      >
        <View style={styles.item}>
          <View style={styles.itemImgPos}>
            <Image
              style={styles.itemImg}
              source={require('./img/burger.jpg')}
            ></Image>
          </View>
          <Text style={styles.itemTitle}>{item.title}</Text>
          <Text style={styles.itemDesc}>{item.desc}</Text>
          <View style={styles.itemBottom}>
            <Text style={styles.price}>
              {item.price} •{' '}
            </Text>
            <Icon
              name="clockcircleo"
              family="AntDesign"
              color="orange"
            ></Icon>
            <Text style={styles.colored} color="orange">
              15 min
            </Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </View>
  ));
}
...