Reactjs 福米克公司；Mobx从API设置初始值

请允许我在前言中说，我是一个新的反应者，我看过其他帖子，但我仍然无法解决这个问题

我的问题如下，我正在尝试创建一个表单，允许用户输入他们的重复次数、设置和使用的重量，作为训练的一部分。但是，如果用户试图输入任何内容，它的行为就像一个只读字段。我怀疑我设置初始值的方式有问题。在我的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;
    }

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>

<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>
                        )}
                    />  

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

我试图将我的表格定义如下：

 @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;
    }

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>

<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>
                        )}
                    />  

constrootstore=useContext（RootStoreContext）；
const{getExercises，exercisesForForm}=rootStore.workoutStore；
useffect（（）=>{
if（匹配参数WOWUTID）{
getExercises（match.params.workoutId）；
}
}，[getExercises，match.params.workUtid]）
{({
手推，
handleChange，
价值观
}) => (
{exercises.map（（exercise，index）=>
(
{exercise.name}
设置
代表
重量
)
)}
)}

---

接下来的问题是，如何正确定义表单的名称组件？在MVC.NET中（这是我最熟悉的web方式），我只需定义一个数组，并使用

@Html.TextBoxFor（x=>x.Answers[I].Answer，new{type=“text”}）

之类的东西动态创建输入，经过大量的谷歌搜索、实验和对文档的重新阅读，我终于找到了它。我将代码更改为如下所示：

 @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;
    }

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>

<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.map（（e，index）=>(
{e.name}
设置
代表
重量
)
)}
)}
)}
/>  

---

需要注意的几件事：我使用

values

属性来访问初始值；我还使用索引设置字段的名称。我认为这是把它联系在一起的缺失环节

在谷歌搜索、实验和重读文档之后，我终于找到了答案。我将代码更改为如下所示：

 @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;
    }

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>

<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.map（（e，index）=>(
{e.name}
设置
代表