Formik & Mobx 从 API 设置初始值

Question

请允许我先说一下我是新来的反应，我看过其他帖子，但我仍然无法解决这个问题。

我的问题如下，我正在尝试创建一个表单，该表单允许用户为作为锻炼一部分的每个练习输入他们的次数、组数和使用的重量。但是，如果用户尝试输入任何内容，它就像一个只读字段。我怀疑我设置初始值的方式有问题。在我的 WorkoutStore.ts 中，我定义了一个名为 exerciseForForm 的计算值，如下所示：

 @computed get exercisesForForm() {
        const data = this.exercises.map((e) => ({
            name: e.name,
            id: e.id,
            sets: e.sets,
            reps: e.reps,
            weight: e.weight

        }));

        return data;
    }

当我通过控制台记录它时，我可以清楚地看到它已正确设置。但是，如果我尝试访问它或任何它一直抱怨它未定义的东西。所以真正的主要问题是：定义从 API 端点接收的初始值的正确方法是什么。如果这只是一个专门针对一个实体的表单（比如一个练习），这会容易得多，因为它会将数据简单的 1 : 1 映射到表单中的元素

我正在尝试如下定义我的表单：

const rootStore = useContext(RootStoreContext);
    const {getExercises, exercises, exercisesForForm} = rootStore.workoutStore;

    useEffect(() => {

        if(match.params.workoutId) {
            getExercises(match.params.workoutId);
        }
    }, [getExercises, match.params.workoutId])


<Formik key={uuid()} onSubmit={handleFormSubmit} initialValues={exercisesForForm} enableReinitialize={true}>
                {({
                    handleSubmit,
                    handleChange,
                    values
                }) => (
                    <Form onSubmit={handleSubmit}>
                    {exercises.map((exercise, index) => 
                        (
                            <Fragment key={exercise.id}>
                                <Header>{exercise.name}</Header>
                                    <Form.Row>
                                        <Form.Group as={Col}>
                                            <Form.Label>Sets</Form.Label>
                                            <Form.Control key={uuid()} type="number" name='sets' value={0} onChange={handleChange}/>
                                        </Form.Group>
                                    </Form.Row>

                                    <Form.Row>
                                        <Form.Group as={Col}>
                                            <Form.Label>Reps</Form.Label>
                                            <Form.Control key={uuid()} type="number" name='reps' onChange={handleChange}/>
                                        </Form.Group>
                                    </Form.Row> 
                                    <Form.Row>
                                        <Form.Group as={Col}>
                                            <Form.Label>Weight</Form.Label>
                                            <Form.Control key={uuid()} type="number" name='weight' onChange={handleChange}/>
                                        </Form.Group>
                                    </Form.Row>       
                            </Fragment>                              
                        )
                        )}
                        <Form.Row>
                            <Form.Group as={Col} controlId='04'>
                                <Button content="Submit" floated='right' type="submit"/>
                            </Form.Group>
                        </Form.Row>     
                        </Form>
                    )}</Formik>

对此的后续问题是，如何正确定义表单的名称组件？在 MVC.NET 中（这是我最熟悉的 Web 方式）我会简单地定义一个数组并使用类似 @Html.TextBoxFor(x => x.Answers[i].Answer, new { type = "text" })

的东西动态创建输入

Answer 1

经过多次谷歌搜索、实验和重读文档，我能够弄清楚。我将代码更改为如下所示：

<Formik key={uuid()} onSubmit={handleFormSubmit}  enableReinitialize={true} initialValues={exercisesForForm}
                        render={({values, handleChange, handleSubmit}) => (
                            <Form onSubmit={handleSubmit}>
                                        {values.map((e, index) => (
                                            <Fragment key={index}>
                                                <Header>{e.name}</Header>
                                                <Form.Row>
                                                    <Form.Group as={Col}>
                                                        <Form.Label>Sets</Form.Label>
                                                        <Form.Control key={`${index}_sets`} type='number' name={`[${index}].sets`} value={(e.sets)} onChange={handleChange} />
                                                    </Form.Group>
                                                </Form.Row>
                                                <Form.Row>
                                                    <Form.Group as={Col}>
                                                        <Form.Label>Reps</Form.Label>
                                                        <Form.Control key={`${index}_reps`} type='number' name={`[${index}].reps`} value={(e.reps)} onChange={handleChange} />
                                                    </Form.Group>
                                                </Form.Row>
                                                <Form.Row>
                                                    <Form.Group as={Col}>
                                                        <Form.Label>Weight</Form.Label>
                                                        <Form.Control key={`${index}_weight`} type='number' name={`[${index}].weight`} value={(e.weight)} onChange={handleChange} />
                                                    </Form.Group>
                                                </Form.Row>
                                            </Fragment>
                                        )

                                    )}
                                )}
                                <Form.Row>
                                    <Form.Group as={Col} controlId='04'>
                                        <Button content="Submit" floated='right' type="submit"/>
                                    </Form.Group>
                                </Form.Row>
                            </Form>
                        )}
                    />  

需要注意的几点：我使用values 属性来访问初始值；我也使用索引来设置字段的名称。我认为这是将它联系在一起的缺失环节。