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

Question

我想将存储在const mappedDatafrom中的数据传递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;

反应选择组件.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;

控制台.log（映射数据）：

(3) […]
​0: "M-Z-8Nm"
​1: "M-P-10Nm"
​2: "V-H"
​length: 3
​<prototype>: Array []

控制台.log（映射数据类型）：

object

标签： javascriptreactjs

Answer 1

FetchDataComponent不是真正的反应组件，因为它不渲染任何东西。它看起来更像是自定义钩子。要使它成为一个钩子，只需使其成为调用其他钩子的简单函数：

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;

在此处阅读有关自定义挂钩的更多信息。