web-dev-qa-db-fra.com

Formulaire redux, valeur «prop» non valide du type «nombre» fournie à «TextInput», «chaîne» attendue

J'utilise un composant personnalisé dans un champ redux-form comme suit.

<Field name="height" parse={value => Number(value)} component={NumberInput} />

Le composant personnalisé utilise React Native's TextInput component et il ressemble à ceci:

import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, TextInput, StyleSheet } from 'react-native';
import { COLOR_PRIMARY } from '../constants';

const styles = StyleSheet.create({
  inputStyle: {
    height: 30,
    width: 50,
    marginBottom: 10,
    borderColor: COLOR_PRIMARY,
    borderWidth: 2,
    textAlign: 'center',
  },
  errorStyle: {
    color: COLOR_PRIMARY,
  },
});

const NumberInput = (props) => {
  const { input: { value, onChange }, meta: { touched, error } } = props;
  return (
    <View>
      <TextInput
        keyboardType="numeric"
        returnKeyType="go"
        maxLength={3}
        style={styles.inputStyle}
        value={value}
        onChangeText={onChange}
      />
      {touched &&
        (error && (
          <View>
            <Text style={styles.errorStyle}>{error}</Text>
          </View>
        ))}
    </View>
  );
};

NumberInput.propTypes = {
  meta: PropTypes.shape({
    touched: PropTypes.bool.isRequired,
    error: PropTypes.string,
  }).isRequired,
  input: PropTypes.shape({
    // value: PropTypes.any.isRequired,
    onChange: PropTypes.func.isRequired,
  }).isRequired,
};

export default NumberInput;

Je souhaite stocker la valeur entrée pour le champ de hauteur sous forme de nombre et non de type chaîne. Par conséquent, j'utilise l'analyse pour convertir la chaîne en un nombre comme vous pouvez le voir dans le champ.

Je peux le faire, mais je reçois toujours l'avertissement de la boîte jaune:

 Invalid prop 'value' of type 'number' supplied to 'TextInput', expected 'string'

J'ai essayé de définir la valeur PropType sur any, string, number ou oneOfType string ou number, rien ne semble fonctionner. J'ai également essayé de définir type = "number" dans le champ et TextInput, ainsi que type = "text".

Toute aide appréciée ...

reactjsreact-nativeredux-formreact-proptypes
8
Praveen

Fondamentalement, dans vos accessoires, vous passez une valeur numérique de valeur.Vous devez la passer sous forme de chaîne.Vous pouvez modifier votre code comme ceci:

<TextInput
  keyboardType="numeric"
  returnKeyType="go"
  maxLength={3}
  style={styles.inputStyle}
  value={`${value}`} //here
  onChangeText={onChange}
/>
39
Kapil Yadav

Cette façon devrait être plus propre:

<TextInput
  value={yourValue ? String(yourValue) : null}
  ...
/>
12
Spadar Shut

Je dirais que ce sera beaucoup plus propre.

<TextInput
  value={yourValue && String(yourValue)}
  ...
/>
0
Adnan sayed