Je veux transmettre les données stockées dans const mappedDatade FetchDataComponent.jsà ReactSelectComponent.js. Existe-t-il un moyen de le faire avec des composants fonctionnels ? Avec le code sous j'obtiensError: Objects are not valid as a React child
FetchDataComponent.js
import React,{useState, useEffect} from "react";
import axios from "axios";
import _ from "lodash";
const FetchDataComponent = () => {
const [data, setData] = useState({product: []})
useEffect(
() => {
(async () => {
const result = await axios.get(
'/products-data'
)
setData(result.data)
})()
}, [])
console.log("data.product:")
console.log(data.product)
const mappedData = _.map(data.product, "proizvod_naziv")
console.log("mappedData:")
console.log(mappedData)
console.log(typeof mappedData)
return ({mappedData});
}
export default FetchDataComponent;
ReactSelectComponent.js
import React, {useState} from "react";
import Select from "react-select";
const ReactSelectComponent = () => {
// place for data from FetchDataComponent.js
const options = [
{
// value: ,
// label:
},
{value: 'strawberry', label: 'Strawberry'},
{value: 'vanilla', label: 'Vanilla'}
]
return (<Select options={options}/>)
}
export default ReactSelectComponent;
console.log(mappedData):
(3) […]
0: "M-Z-8Nm"
1: "M-P-10Nm"
2: "V-H"
length: 3
<prototype>: Array []
console.log (type de données mappées) :
object
FetchDataComponentn'est pas vraiment un composant de réaction puisqu'il ne rend rien. On dirait plutôt que c'est un crochet personnalisé. Pour en faire un crochet, faites simplement une fonction simple qui appelle d'autres crochets :
const useFetchedData = () => {
const [data, setData] = useState({ product: [] })
useEffect(
() => {
(async () => {
const result = await axios.get(
'/products-data'
)
setData(result.data)
})()
}, [])
const mappedData = _.map(data.product, "proizvod_naziv")
return mappedData
}
export default useFetchedData;
Et maintenant, vous pouvez utiliser la valeur de retour de ce hook pour obtenir les données que vous voulez et les transmettre à d'autres composants.
const ReactSelectComponent = () => {
const mappedData = useFetchedData()
const options = mappedData.map(value => ({ value, label: value }))
return (<Select options={options}/>)
}
export default ReactSelectComponent;
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots