Formik＆Mobx从API设置初始值

Question

[允许我在开始时说我是新来的人，我看过其他帖子，但仍然无法解决此问题。

我的问题如下，我正在尝试创建一个表格，该表格允许用户输入锻炼的一部分，每次练习的次数，设置和所用的体重。但是，如果用户尝试输入任何内容，则其作用类似于只读字段。我怀疑是我设置初始值的方式有问题。在我的WorkoutStore.ts中，我定义了一个名为ExercisesForForm的计算值，如下所示：

 @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

经过大量的搜索，实验和重新阅读文档后，我得以弄清楚。我将代码更改为如下所示：