React Formik Material UI Autocomplete：如何从localStorage填充值？

我在用Formik和Material UI搭建表单时，其他字段都能正常工作，但Autocomplete组件始终没办法从localStorage里读取并填充保存的值。我试过设置value、inputValue、defaultValue这些属性，都没效果。

问题代码 #

import React from 'react'
import { Grid } from '@material-ui/core'
import { Autocomplete } from '@material-ui/lab'
import { Formik, Form, Field } from 'formik'
import { TextField } from 'formik-material-ui'
import * as yup from 'yup'
import { nationality } from '../../constants/nationality'
import Button from '../Button/Button'

export default function ForeignAddress () {
  let localStorageData = localStorage.getItem('foreignAddress'),
    retrivedData = JSON.parse(localStorageData)

  const handleNextClick = () => {
    console.log('clicked next')
  }

  const handleBackClick = () => {
    console.log('clicked back')
  }

  const validationSchema = yup.object({
    streetName: yup.string().required('Street name is required'),
    streetNumber: yup.string().required('Street number is required'),
    postalCode: yup.string().required('Postal code is required'),
    city: yup.string().required('City is required'),
    country: yup.string().required('Country is required'),
  })

  console.log(retrivedData)

  return (
    <React.Fragment>
      <div className="pages-wrapper address">
        <Formik
          initialValues={retrivedData ? retrivedData : {streetName: '', streetNumber: '', postalCode: '', city: '', coAddress: '', country: ''}}
          onSubmit={(data) => {
            console.log(data)
            localStorage.setItem('foreignAddress', JSON.stringify(data))
            handleNextClick()
          }}
          validationSchema={validationSchema}
        >
          {({setFieldValue}) => (
            <Form>
              <Grid container spacing={3}>
                <Grid item xs={12} md={8}>
                  <Field component={TextField} name="streetName" label="Street Name" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs={12} md={4}>
                  <Field component={TextField} name="streetNumber" label="Street Number" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs={12} md={4}>
                  <Field component={TextField} name="postalCode" label="Postal Code" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs={12} md={8}>
                  <Field component={TextField} name="city" label="City" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs={12} md={6}>
                  <Field component={TextField} name="coAddress" label="C/O Address" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs={12} md={6}>
                  <Autocomplete
                    id="foreignCountry"
                    className="country-select"
                    name="country"
                    options={nationality}
                    getOptionLabel={option => option.label}
                    onChange={(e, value) => {
                      console.log(value)
                      setFieldValue("country", value.code)
                    }}
                    renderInput={params => (
                      <Field component={TextField} {...params} name="country" label="Country" variant="outlined" fullWidth/>
                    )}
                  />
                </Grid>
              </Grid>
              <div className="button-wrapper">
                <Button label="Back" go="back" handleClick={handleBackClick}/>
                <Button label="Next" go="next" type="submit" />
              </div>
            </Form>
          )}
        </Formik>
      </div>
    </React.Fragment>
  )
}

解决方案（已修复） #

感谢@Vencovsky的帮助，我成功解决了这个问题。主要做了两处关键修改：

1. 从Formik的props中获取values，用来给Autocomplete设置defaultValue，让组件能读取到localStorage里的初始值
2. 调整onChange中setFieldValue的参数，直接保存选中的完整option对象，而不是只存code，确保后续能正确回显

修复后的代码：

// 修改Formik的props，添加values
{({setFieldValue, values}) => (
  <Form>
    // ...其余代码不变
    <Grid item xs={12} md={6}>
      <Autocomplete
        id="foreignCountry"
        className="country-select"
        name="country"
        options={nationality}
        getOptionLabel={option => option.label}
        defaultValue={values.country}
        onChange={(e, value) => {
          console.log(value)
          setFieldValue("country", value)
        }}
        renderInput={params => (
          <Field component={TextField} {...params} name="country" label="Country" variant="outlined" fullWidth/>
        )}
      />
    </Grid>
    // ...其余代码不变
  </Form>
)}

内容的提问来源于stack exchange，提问作者utazabanje