如果我在反应中更改一个输入，所有值字段都将更改为相同的值

Posted 2023-02-18

【中文标题】如果我在反应中更改一个输入，所有值字段都将更改为相同的值

【英文标题】：All value fields are changing to the same value if I change one input in react

【发布时间】：2022-01-21 21:31:51

【问题描述】：

这是我的代码：

    lining.hitprescription ?
    <div className="prescription-form">
        
            medicine.map((item, index) => 
                return <>
                    <div className="form-items" key=index>
                        <label htmlFor="name">Medicine index + 1:</label>
                        <input className="prescription-input"...formik.getFieldProps("medicine")></input>
                    </div>
                </>
             )
         
         <div className="form-items" onClick=addMoreMedicine>
             <label htmlFor="addmore" style= color: "blue" >Add More <Add></Add></label>
         </div>
    </div>: null

在 react JSX 中，我正在映射输入表单字段，其中医学被初始化为

const [medicine, setmedicine] = useState(["", ""])

我正在使用 formik，其中值被初始化为

const formik = useFormik(
    initialValues: 
        basicInfo: '',
        labTestId: [],
        appointmentId: null,
        medicine: ""
    ,
    validate: values => 
        let errors = 
        if (!values.basicInfo) 
            errors.basicInfo = "Required!"
        
        return errors
    
)

我遇到的问题是，如果我更改了一个输入字段，那么在更改字段期间，其他输入字段中会显示相同的值，如何解决这个问题？

【问题讨论】：

你有多少个输入？我在您的代码中只看到一个输入请指定

@AhmedHosny 都指定正确。你可以在 JSX medicine.map 中看到 const [medicine, setmedicine] = useState(["", ""]) 数组有 2 个空字符串。结论：2 个输入

【参考方案1】：

这种行为是因为您为每个输入设置了 medicine 类型的状态 array。什么时候 您映射药物数组，您必须通过index 为每个输入设置状态。示例：

...formik.getFieldProps("medicine")[index]

codesandbox