React Native Formik use with react redux (ReferenceError: Can't Find Variable: title)

Question

我怀疑我的 onSubmit 函数有问题。上面说的错误是我在运行申请的时候遇到的。

我试图更改我的 onSubmit 函数以将“title”作为有效负载，但这也没有用

将不胜感激。

添加拍卖表格：

import React, {Component} from 'react'
import { TextInput, Button } from 'react-native-paper'
import { View } from 'react-native'
import { connect} from 'react-redux'
import { Formik } from 'formik'

import { addAuction} from '../../actions/index'


function mapDispatchToProps(dispatch) {
    return {
        addAuction: auction => dispatch(addAuction(auction))
    }
}

class ConnectedForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: ''
        }
        
    }
    
    render() {
        return (
            <Formik
                onSubmit={() => addAuction(auction)}
            >
                {({ handleChange, handleSubmit, values}) => (
                    <View>
                        <TextInput
                        onChangeText={handleChange('title')}
                        value={auction.title}
                        />
                        <Button onPress={handleSubmit} title="SUBMIT"/>
                    </View>     
                )}
            </Formik>
        );
    }
}

const Form = connect(null, mapDispatchToProps)(ConnectedForm)

export default Form

操作：

import { ADD_AUCTION } from '../constants/action-types'

export function addAuction(payload) {
    return { type: 'ADD_AUCTION', payload}
}

减速器：

import {ADD_AUCTION} from '../constants/action-types';

const initialState = {
    auctions: []
}

function rootReducer(state = initialState, action) {

    if (action.type === ADD_AUCTION) {
        return Object.assign({}, state, {
            auctions: state.auctions.concat(action.payload)
        })
    }
    return state
}

export default rootReducer;

Answer 1

您正在使用的库 (react-native-paper) 和 Formik 不直接兼容。您将无法直接使用 handle* 道具。

最好的办法是直接使用 setFieldValue 和 submitForm：

            <Formik
                onSubmit={() => addAuction(auction)}
            >
                {({ setFieldValue, submitForm, values}) => (
                    <View>
                        <TextInput
                        onChangeText={v => setFieldValue('title', v)}
                        value={auction.title}
                        />
                        <Button onPress={() => submitForm()} title="SUBMIT"/>
                    </View>     
                )}
            </Formik>

React Native Formik use with react redux (ReferenceError: Can't Find Variable: title)

React Native Formik use with react redux (ReferenceError: Can't Find Variable: title)

javascript

reactjs

react-native

redux

formik