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

【问题标题】：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 个输入

标签： reactjs jsx formik

【解决方案1】：

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

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

codesandbox

【讨论】：