React-Native дочерний компонент не отображает информацию в родительском компоненте - PullRequest
Новая
       6

React-Native дочерний компонент не отображает информацию в родительском компоненте

0 голосов
/ 11 октября 2018

Я разрабатываю приложение React Native, использующее ScrollView.Я хочу отобразить количество элементов (карта с заголовком и дочерним компонентом).

Проблема возникает, когда мне нужно визуализировать каждый элемент, в то время как родитель отрисовывает нормально, а ребенок - нет.

Я не знаю, в чем может быть проблема, вот мой код: 

    import React, {Component} from 'react';
    import {View, Text} from 'react-native';

    const mismo =[
     'Mismo',
     'Mismo',
     'Mismo',
     'Mismo',
     'Mismo'
    ];


    class Mismo extends Component {


     renderMismo2(){
       mismo.map((item) =>{
       return(
         <View>
           <Text>{item}</Text>
         </View>
       )
     })
    }

  render(){
    return(
      <View>
      {this.renderMismo2()}
      </View>
    );
  }
}

export default Mismo;

====================================== 

import React, {Component} from 'react';
import {View, Text, ScrollView} from 'react-native';
import {Card} from 'react-native-elements';

import PriceCard from '../components/PriceCard';
import Mismo from '../components/Mismo';


class OrderPricingCard extends Component{
  renderAllPrices(){
    this.props.data.orders.map((item, i) => {
      return(
        <View>
          <PriceCard
            key={item.transporterName}
            data={item}
          />
        </View>
      );
    })
  }

  renderMismo(){
    return(
      <Mismo />
    );
  }

  render () {
    return (
      <Card
        containerStyle={styles.cardContainer}
        title={`Pedido: ${this.props.data.id}`}
      >
        <ScrollView
          horizontal
        >
            {this.renderMismo()}

            {this.renderAllPrices()}



        </ScrollView>
      </Card>
    );
  }
}

const styles = {
  cardContainer:{
    borderRadius: 10,
    shadowColor: "#000",
    shadowOffset: {
        width: 0,
        height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  }

}

export default OrderPricingCard;

1 Ответ

0 голосов
/ 11 октября 2018

Это может быть легкой ошибкой!Я делал это несколько раз.Вы забыли оператор return для методов рендеринга (renderMismo2() и renderAllPrices()), найденных в каждом компоненте.Хотя у методов map правильно есть операторы return, вы фактически ничего не возвращаете из самих функций.

Если бы вы console.log() выполняли любой из этих вызовов функций выше return в методе React render(), вы бы увидели undefined в консоли.

Вот что онибудет выглядеть исправлено. 

renderAllPrices(){
    // added the 'return' keyword to begin the line below
    return this.props.data.orders.map((item, i) => {
      return(
        <View>
          <PriceCard
            key={item.transporterName}
            data={item}
          />
        </View>
      );
    })
  }

 renderMismo2(){
   // same here, added the 'return' keyword
   return mismo.map((item) =>{
   return(
     <View>
       <Text>{item}</Text>
     </View>
   )
 })
}

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

...