[解決済み] 不変量違反。文字列は<Text>コンポーネント内でレンダリングされなければならない。

質問

RN 0.54から0.57にアップグレードしましたが、React Native Elementsを使用しているため、アプリがかなり崩れてしまいました。

のエラー機能を利用したのですが TextInput コンポーネントで、基本的にエラーメッセージをスタイルし、エラーメッセージを設定することができるプロップを有効にしました。非常に便利でしたが、アップグレードによってこれらが壊れ、このエラーが表示されるようになりました。

そのコードを削除したら、エラーはなくなりましたが、このコードを実行すると、まだ問題が発生します。

{ this.state.event.cards[i].fields[j].error && 

  <Text style={{ color: '#e74c3c', fontSize: 14, paddingLeft: 5 }}>
    {this.state.event.cards[i].fields[j].error}
  </Text>
}

テキスト入力に入力を始めると、エラーメッセージを空文字列に設定するので、エラーが返された場合、フィールドに入力するとエラーが消えます。

と同時に this.state.event.cards[i].fields[j].error が文字列になった途端、このエラーが返されます。しかし、私はエラーが存在するかどうかを確認し、その後、私はちょうどエラーを表示する、または少なくともしようとすることがわかります。

この件に関して、もう一組の目があればありがたいのですが。

どのように解決するのですか？

私の場合、次のコードはうまく動作します。 this.state.error === undefined またはそれが空文字列でない限り、私は以下のコードが正常に動作します。

render() {
  return (
    <View>
      {this.state.error &&

        <Text>
          Error message: {this.state.error}
        </Text>
      }
    </View>
  );
}

エラー状態が空文字列「'」に変更された場合、前述の例外が発生します。 Invariant Violation: Text strings must be rendered within a <Text> component

その理由は this.state.error === '' の場合、以下の式は空文字列、すなわち '' と評価され、これにより Invariant Violation: Text strings must be rendered within a <Text> component

{this.state.error &&

  <Text>
    Error message: {this.state.error}
  </Text>
}

いつ this.state.error === undefined の場合、式は次のように評価されます。 undefined と評価され、それは私たちが期待するものであり、問題ありません。