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

Question

我想把存储在 const mappedData 从 FetchDataComponent.js 到 ReactSelectComponent.js. 有什么方法可以做到这一点的功能组件？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(typeof 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 不是真正的react组件，因为它没有渲染任何东西。它看起来更像是一个自定义钩子。要把它变成一个钩子，只要把它变成一个简单的函数，调用其他钩子就可以了。

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;

现在你可以使用钩子的返回值来获取你想要的数据 并将其传递给其他组件。

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

在这里阅读更多关于自定义钩子的内容。

Answer 2

你需要将道具传递给 react-select 请看这个答案。

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

如何在react-select中把道具传递给自定义组件？

另外，你必须返回 JSX 从反应组分。