通过多个组件nextjs传递道具

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.

这是因为当我在map组件的select元素中运行以下代码时，选项变量没有使用Select函数进行更新：

{console.log(options)}

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

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

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

我觉得这和Server-Side-Rendering in NextJS有关。

Answer 1

尝试，这是因为您正在尝试执行一个映射选项数据并将其放入select标记中，这就是select无法识别您的扩展选项数据的原因，而您只需要在select标记中映射该选项数据。

​

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

​