TypeError: undefined is not an object (evaluating '(i === 0 ? obj : resVal)[pathArray[i]]')

オープン
  • 何か問題がありますか？
#142 コメント 4 件 リアクション 2 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript, react, react-native
領域
frontend, mobile

調査の方向性

リンクされている Snack デモと package.json に記載されたバージョンを使ってエラーを再現し、その後、エントリーポイントである handleTextInput とテキストフィールドとの相互作用を調査します。validationSchema がある場合とない場合、および auto-focus ヘルパーがある場合とない場合の動作を比較します。各フィールドに 1 文字入力しても報告された TypeError が発生せず、フォームの送信も引き続き機能すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

I'm basically using the demo Gist verbatim:

https://snack.expo.io/@almouro/react-native-formik-gist

When I type a single letter into any text field I get the error:

TypeError: undefined is not an object (evaluating '(i === 0 ? obj : resVal)[pathArray[i]]')

I tried removing validationSchema and I still got the error. Separately, I tried removing withNextInputAutoFocusForm and withNextInputAutoFocusInput, and still got the problem. It feels like a bug in handleTextInput. Maybe I'm doing something stupid in the syntax below.

From package.json:

"formik": "^2.1.4",
"react-native-formik": "^1.7.8",
"react-native-material-textfield": "^0.16.1",
"recompose": "^0.30.0",
"yup": "^0.28.3"

Code:

import React from 'react';
import { Button, ScrollView, View } from 'react-native';
import { compose } from 'recompose';
import { Formik } from 'formik';
import * as Yup from 'yup';
import {
  handleTextInput,
  withNextInputAutoFocusForm,
  withNextInputAutoFocusInput
} from 'react-native-formik';
import { OutlinedTextField } from 'react-native-material-textfield';

const MyInput = compose(
  handleTextInput,
  withNextInputAutoFocusInput
)(OutlinedTextField);
const Form = withNextInputAutoFocusForm(View);

const validationSchema = Yup.object().shape({
  country: Yup.string()
    .required('Required.')
    .length(2, 'Must be 2 letter country code.'),
});

const RegistrationForm = props => (
  <Formik
    onSubmit={values => console.log(values)}
    validationSchema={validationSchema}
  >
    {props => (
      <Form>
        <MyInput label="Country" name="country" type="name"/>
        <MyInput label="Business name" name="name" type="name"/>
        <MyInput label="Business website" name="website" type="email"/>
        <MyInput label="Business phone number" name="phone" type="digits"/>
        <MyInput label="Address line 1" name="addressLine1" type="name"/>
        <MyInput label="Address line 2" name="addressLine2" type="name"/>
        <MyInput label="City" name="city" type="name"/>
        <MyInput label="State" name="state" type="name"/>
        <MyInput label="Zip code" name="zip" type="digits"/>
        <Button onPress={props.handleSubmit} title="SUBMIT" />
      </Form>
    )}
  </Formik>
);

export default class MyScreen extends React.Component {
  render() {
    return (
      <ScrollView style={{ padding: 30 }}>
        <RegistrationForm/>
      </ScrollView>
    );
  }
}
主要言語
JavaScript
スター
397
フォーク
47
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

bamlab/react-native-formik のほかの issue

bamlab/react-native-formik の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。