web-dev-qa-db-ja.com

Redux-form、タイプ 'number'の無効なprop 'value'が 'TextInput'に提供されました。予期される 'string'

次のようにredux-formフィールドでカスタムコンポーネントを使用しています。

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

カスタムコンポーネントはReact NativeのTextInputコンポーネントを使用し、次のようになります。

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;

高さフィールドに入力した値を、文字列型ではなく数値として保存したい。したがって、フィールドで確認できるように、文字列を数値に変換するために解析を使用しています。

私はこれを行うことができますが、次のイエローボックスの警告が表示され続けます。

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

値PropTypeをany、string、number、またはoneOfTypeの文字列または数値に設定しようとしましたが、何も機能していないようです。また、type = "text"と同様に、FieldおよびTextInputでtype = "number"を設定しようとしました。

助けていただければ幸いです...

reactjsreact-nativeredux-formreact-proptypes
8
Praveen

基本的に、小道具ではvalueの数値を渡します。文字列の形式で渡す必要があります。次のようにコードを編集できます。

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

この方法はよりきれいでなければなりません：

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

これはもっときれいになると思います。

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