不变冲突：文本字符串必须在组件中呈现

Question

我已经从RN0.54升级到了0.57，而我的应用程序由于使用了React原生元素而几乎崩溃了。

我在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>
}

Answer 1

对我来说，只要this.state.error===undefined或者它不是空字符串，下面的代码就可以正常工作。

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

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

如果错误状态更改为空字符串“”，您将出现前面提到的异常:不变冲突：文本字符串必须在 组件 内呈现

其原因是，当this.state.error===“”时，以下表达式将被计算为空字符串，即“”，这将导致不变冲突：文本字符串必须在 组件 中呈现

{this.state.error &&

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

当this.state.error===undefined时，表达式将被计算为undefined，这正是我们所期望的，这很好。