通过多个组件nextjs传递props

Question

我是Next.js的新手，在组件之间共享数据时遇到问题。 我有三个组件：

//index.js
function App() {
   const options = []
    for (let i = 1; i < 101; i++) {
        options.push({
            label: i,
            value: i
        })
    }
    return (
        <>
            <Form options={options}/>
        </>
    )
}

function Form({options}) {
    return(
        <form>
            <Select options={options}/>
        </form>
    )
}

function Select({options}) {
    options = options?.map(option => {
        return <option value={option.value}>{option.label}</option>
    })
    return (
        <select>
            {...options}
        <select/>
    )
}

这是代码的简化版本。

当我运行此代码时，我收到此Error ：

x Spread children are not supported in React.

这是因为当我在Select组件的 select 元素内运行此代码时，options 变量未使用map函数更新：

{console.log(options)}

我得到一个对象数组，其对象如下所示：

{
    $$typeof: Symbol(react.element),
    key: "1",
    //etc....
}

当我在Form组件中运行这个console.log()时，我得到了我在index.js文件中创建的数组。

我觉得这与NextJS中的Server-Side-Rendering有关。

Answer 1

尝试，这是因为您正在尝试制作地图选项数据并将其放入选择标签中，这就是选择无法识别您的传播选项数据的原因，您只需要在选择标签内映射该选项数据

 function Select({options}) { return ( <select> {options?.map((option) => { return <option value={option.value}> {option.label}</option>; })} </select> );