如何在 React 中将数组作为结果从一个功能组件传递到另一个功能组件

Question

I want to pass data stored in const mappedData from FetchDataComponent.js to ReactSelectComponent.js . Is there any way of doing this with functional components? With code under i get Error: 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(typeof mappedData):

object

Answer 1

FetchDataComponent is not really a react component since it does not render anything. It looks more like this is custom hook. To make that a hook, just make it simple function that calls other hooks:

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;

And now you can use that hook's return value to get the data you want and pass that to other components.

const ReactSelectComponent = () => {
    const mappedData = useFetchedData()
    const options = mappedData.map(value => ({ value, label: value }))
    return (<Select options={options}/>)
}
export default ReactSelectComponent;

Read more about custom hooks here.

Answer 2

You need to pass props to react-select see this answer for example:

<Select
  closeMenuOnSelect={true}
  options={colourOptions}
  components={{
    Input: (inputProps: InputProps) => (
      <components.Input {...inputProps} />
    ),
  }}    
/>

How to pass props to custom components in react-select

Also you must return JSX from react components.