NextJS 和 Formik：选择下拉菜单上的条件/动态呈现表单字段

Question

我的网页上Next.js的条件渲染有问题。Formik

所以我在我的页面上命名了一个数组commands，这很容易：

const commands = [

    {

        value: 'launch',

        display_name: 'LAUNCH ROCKET!',

    },

    {

        value: 'delay_launch',

        display_name: 'LAUNCH IN..',

    },

    {

      ....list of elements, they are not API fetched!

    }

];

我的页面上需要一个网络表单（组件）（基于Formik）

该组件如下所示：

<Container>

    <Formik

        initialValues={{ command: 'launch', arguments: 'test'}}

        onSubmit={async (values, { setSubmitting }) => {

            await setSubmitting(false);

            await Router.push(`/${values.command}`);

        }}

    >

    {({

            values,

            errors,

            touched,

            handleChange,

            handleBlur,

            handleSubmit,

            /* and other goodies */

        }) => (

        <form onSubmit={handleSubmit} noValidate autoComplete="off">

            <Grid container spacing={3} direction="row" justify="center" alignItems="center">

                <Grid item xs={3}>

                    <TextField

                        name="command"

                        select

                        label="Select command"

                        className={classes.dropdown}

                        onChange={handleChange}

                        onBlur={handleBlur}

                        value={values.command}

                        variant="outlined"

                    >

                        {commands.map((option) => (

                            <MenuItem key={option.value} value={option.value}>

                                {option.label}

                            </MenuItem>

                        ))}

                    </TextField>

                </Grid>

它（应该）如何工作？

当您在页面上选择下拉菜单时（以 Formik 的形式），它会呈现其他字段，具体取决于 select value。

但是如何根据确定的选定值以我的形式呈现它？我想应该有类似的东西：Map.get(number)，但我还没有找到任何例子，而且，我不知道渲染代码片段应该如何存储在数组中。如果我将它存储在一个string值中，可以吗？

Answer 1

我在 Formik 的 Github第 751 期和本文中发现了一个相关问题。所以我发现我的问题有点不同，但相关的解决方案。这是一个片段@CodeSandbox和StackOverflow 的答案。所以解决方案是基于原始表单的子组件，它是基于选择字段呈现的。（正是我需要的）。不幸的是，我没有解决重复代码的问题，而是很好地构建代码并只呈现表单的必要部分。