Функция Pass, Receive и Use в дочерний компонент

Question

Я все еще изучаю ReactJS / React Native, и я уверен, что застрял в глупости.Вот мой случай: я хочу получать данные в моем дочернем компоненте и отображать их в модальном режиме.Итак:

У меня есть такая функция (axios, API, ...):

getProductInfo = (product_id) => {
    axios.get(
        `API-EXAMPLE`
    )
    .then((response) => {
        this.setState({
            isVisible: false,
            productInfo: response.data
        })
        console.log(this.state.productInfo);
    })
}

Я передаю функцию своему дочернему компоненту с помощью «onModalPress»:

<CatalogList productsList={this.state.displayProducts} onModalPress={this.getProductInfo}/>

А здесь немного информации о дочернем компоненте:

const CatalogList = ({productsList, onModalPress}) => (
<Card containerStyle={styles.container}>

<View style={{ padding:20, margin:0, flexDirection: 'row', flexWrap: 'wrap', flex: 1, justifyContent: 'space-between' }}>
{
    productsList.map((p, i) => {
        return (
            <TouchableHighlight key={i} onPress={() => onModalPress(p.id)}>
                <View style={style.card}>
                    <View style={style.content}>
                        <View style={{width: 170, zIndex: 2}}>
                            <Text style={style.name}>{p.id}</Text>
                            <Text style={style.name}>{p.name}</Text>
                            <Text style={style.winemaker}>Domaine : {p.domain}</Text>
                            <Text style={style.winemaker}>Origine : {p.wine_origin}</Text>
                            <Text style={style.aop}>Appellation : {p.appellation}</Text>
                        </View>
                        <Image
                            style={style.image}
                            source={{ uri: p.image, width: 140, height: 225, }}
                        />
                    </View>
                    <View style={style.entitled}>
                        <Text style={[style.priceText, style.cadetGrey]}>{p.publicPriceText}</Text>
                        <Text style={style.priceText}>{p.subscriberPriceText}</Text>
                    </View>
                    <View style={style.row}>
                        <Text style={[style.price, style.cadetGrey]}>{p.price} €</Text>
                        <Text style={style.price}>{p.subscriber_price} €</Text>
                    </View>
                    <View style={[{backgroundColor: p.label_colour}, style.label]}>
                        <Text style={style.labelText}>{p.label}</Text>
                    </View>
                    <Modal isVisible={false}>
                        <View style={{ flex: 1 }}>
                            {/* <Text>{productInfo.rewiew_wine_waiter}</Text> */}
                        </View>
                    </Modal>
                </View>
            </TouchableHighlight>
        );
    })
}
</View>
  </Card>
);

«p.id» исходит из других данных (productList), которые я получаю с помощью другого вызова Axios API.С помощью "p.id" я получаю нужный мне product_id в своей функции

getProductInfo

Все работает, и я отображаю информацию в моем console.log (this.state.productInfo).

Моя проблема, и я думаю, проста ... Это как я могу "сохранить / сохранить" эту информацию, которую я храню в файле console.log, в const / props, чтобы использовать ее в моем Модале и вызвать ее, как в этом примере:

<Modal isVisible={false}>
   <View style={{ flex: 1 }}>
      <Text>{productInfo.rewiew_wine_waiter}</Text>
   </View>
</Modal>

Конечно, любые другие советы приветствуются!

Answer 1

React - это односторонний поток данных по иерархии компонентов

Предположим, что у вас есть Container компонент, который извлекает все данные:

    class MyContainer extends Component{
        state = {
            myItensToDisplay: []
        }
        componentDidMount(){
            //axios request
               .then(res => this.setState({myItensToDisplay: res.itens}))  
        }
    }

Хорошо выглядит! Теперь у вас есть все данные, которые вы хотите отобразить, извлеченные и сохраненные в состоянии вашего контейнера. Давайте передадим его компоненту Item:

    class MyContainer extends Component{
        // All the code from above

       render(){
            const itens = this.state.myDataToDisplay.map( item =>{
                return(<Item name={item.name} price={item.price} />);
            })

            return(
                <div>
                    {itens}
                </div>
            )
        }
    }

Теперь вы извлекаете все данные, которые вы хотите отобразить в родительском компоненте, и распространяете эти данные своим детям через реквизит.