Expo/React Native 错误 - TypeError: undefined is not an object (evalating 'string.toLowerCase')答案

【问题标题】：Expo/React Native error - TypeError: undefined is not an object (evaluating 'string.toLowerCase')Expo/React Native 错误 - TypeError: undefined is not an object (evalating 'string.toLowerCase')
【发布时间】：2020-10-11 16:31:59
【问题描述】：

所以我正在制作一个 React Native 应用程序，我在 heroku 上设置了服务器和数据库。使用 expo 在手机和我的电脑上的网络浏览器中查看。

在网络上，一切正常。

在手机上，我从屏幕截图中得到了错误。我猜是数据没有按时出现的问题，或者可能有不同的编写方式？

有没有办法在不使用 android studio 的情况下在手机上获取完整的应用程序？

这是与错误相关的代码：

<TextInput
    style={styles.input}
    placeholder='Search...'
    onChange={(e) => { this.handleInput(e.target.value) }}
></TextInput>


handleInput = (value) => {
  if (value !== this.state.insertionIngredient) {
    this.setState({ ...this.state, insertionIngredient: value });
  };
};

handleFindButton = () => {
  this.setState({ ...this.state, isLoading: true });

  const id = searchString(this.state.insertionLanguage, this.state.data, 
                          this.state.insertionIngredient);
  const result = getById(this.state.queryLanguage, this.state.data, id);

  if (id === 'No such word in the database.' || result === 'No such word in the database.') {
    this.setState({ ...this.state, queryIngredient: 'No such word in the database.' });
  } else {
    this.setState({ ...this.state, queryIngredient: result });
  };
};

const searchString = (language, state, string) => {
  let array;
  if (language === 'english') {
      array = state.english;
  } else if (language === 'spanish') {
      array = state.spanish;
  } else if (language === 'german') {
      array = state.german;
  } else if (language === 'serbian') {
      array = state.serbian;
  };

  string = string.toLowerCase();
  let filter = escapeRegExp(string);
  let regex = new RegExp("^" + filter, "i");

  const word = array.filter(val => {
      return val.word.match(regex)
  });

  if (word.length > 0) {
      return word[0].id;
  } else {
      return 'No such word in the database';
  }};

【问题讨论】：

由于可用的代码和快照有限，我只能怀疑错误是否与状态 insertionIngredient 有关，具有不同的值。我建议插入几个日志语句来跟踪所有函数体中insertionIngredient 的值。此外，不要将 args 传递给 searchString(this.state.insertionLanguage, this.state.data, this.state.insertionIngredient).. 我建议，在没有 args 的情况下调用 searchString() 并从状态访问语言、状态、字符串值。
我可以尝试将代码带回主组件而不是导入它，但我认为这不会解决问题。
不，我的意思是，仅将代码保留在您的组件中，但可能会改变您布置逻辑的方式。您的代码块看起来是线性的，实际上并没有串行执行，而是所有行都是并行执行的。我的意思是，state 对insertionIngredient 的价值可能与我们预期的不同。

标签： javascript android react-native expo

【解决方案1】：

仅通过阅读错误，我相信您会遇到string 未定义的情况。一个简单的解决方法是检查 string 是否存在，如果存在则应用 toLowerCase 。示例：

if (string) string = string.toLowerCase();

else console.log("string doesn't exist, look into it");

【讨论】：

我知道这是问题所在，但字符串不能为空，因为它是在使用 onChange 方法更改输入值时生成的。只能在手机上的expo转播应用导致延迟的情况下不定义。
为了调试方便，可以试试onChangeText()的方法，而不是onChange()。在您的示例中：<TextInput style={styles.input} placeholder='Search...' onChangeText={(userInput) => { this.handleInput(userInput) }} ></TextInput>

【解决方案2】：

问题是我使用了 onChange 方法而不是 onChangeText。所以不要这样：

<TextInput
  style={styles.input}
  placeholder='Search...'
  onChange={(e) => { this.handleInput(e.target.value) }}
></TextInput>

我应该这样写的：

<TextInput
  style={styles.input}
  placeholder='Search...'
  onChangeText={(e) => { this.handleInput(e) }}
></TextInput>

【讨论】：