Formik 和 React Native：更新 parent 值

Question

我有一个 "virtual" 字段 inspection.images，我需要使用 setFieldValue 从 child 组件更新它，但它没有更新。我做错了什么？

parent-component.js

...
<Formik
    initialValues={{
        inspection: {images:[]}
    }}
    onSubmit={values => {
        console.log('form values: ');
        console.log(JSON.stringify(values, null, 2));
    }}
    render={({values, isValid, handleSubmit, setFieldValue, errors}) => (
        <View style={styles.screen}>
            <Walkthrough onChanged={this.onWalkThroughIndexChanged}>
                <InspectionForm navigation={this.props.navigation} values={values} setFieldValue={setFieldValue}
                                mediaObjectsHandler={this.mediaObjectsHandler.bind(this)}/>
            </Walkthrough>
        </View>
    )}
/>

child-component.js

...
export class InspectionForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            inspectionMedia: [],
            progress: 0,
        };
        props.setFieldValue('inspection.images', [...props.values.inspection.images, 'xxxx.png']);
    }

    render() {
        return (
            ...
        );
    };
}

Answer 1

field should match the key of values you wish to update

看来您必须使用 inspection 而不是 inspection.images

Formik 和 React Native：更新 parent 值

Formik & React Native: update parent value

state

reactjs

react-native

formik