无法在“ React.js”中使用Formik实现两种方式绑定

Question

class FruitShop extends Component {
    constructor(props) {
        super(props)
        this.state = {
            jobDetailsList: [],
            fruitTitle: (typeof this.props.location.state !== 'undefined') ? this.props.location.state.fruitTitle : '',
        };
        this.showFruitListDetails = this.showFruitListDetails.bind(this);
    }
    showFruitListDetails(fruitList) {
        this.setState({
            fruitDetailsList: fruitList,
        });
        let fruitTitleValue = JSON.parse(JSON.stringify(this.state.fruitDetailsList)).fruitTitle;
        this.setState({
            fruitTitle: fruitTitleValue,
        });
    }

    render() {
        return (
            <Formik
                initialValues={{
                    fruitTitle: this.state.fruitTitle,
                }}

                render={({ errors, touched, isSubmitting, setFieldValue }) => (
                    !isSubmitting ? (

                        <Form>
                            <div>
                                <CloneNewFruitPage showFruitListDetailsHandler={this.showFruitListDetails} />
                            </div>
                            <div className="form-group">
                                <label htmlFor="fruitTitle">Fruit Title</label>
                                <Field name="fruitTitle" type="text" />
                            </div>
                        </Form>) : (<PageSpinner />)
                )}
            />
        );

1. 在上面的代码中，我从CloneNewFruitPage获取fruitDetailsList的值，该值是页面FruitShop绕过方法（showFruitListDetails）的子组件，作为对CloneNewFruitPage的支持
2. 我已经使用setState方法（对于状态变量fruitTitle）将fruitTitleValue保存为状态
3. 现在我想在状态保存后立即自动填充formik（fruitTitle）输入字段的值
4. 如何实现这一目标？

Answer 1

如果initialValues值在运行时发生更改，则始终可以将属性enableReinitialize={true}添加到Formik组件中。

https://jaredpalmer.com/formik/docs/api/formik#enablereinitialize-boolean