解决不变式违规：文本字符串必须在<Text>组件中呈现

Question

我有一个用于渲染图像和视频的滑块，但是有时video是空白的，所以我正在获取特定的渲染项目。

Invariant Violation: Invariant Violation: Text strings must be rendered within a <Text> component.
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:4028:2 in createTextInstance
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14494:37 in completeWork
- ... 8 more stack frames from framework internals
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method,
    in AdContextProvider (at App.js:30)
    in App (at withExpoRoot.js:20)
- node_modules/expo/build/logs/LogSerialization.js:166:14 in _captureConsoleStackTrace
- node_modules/expo/build/logs/LogSerialization.js:41:24 in serializeLogDataAsync$
- ... 9 more stack frames from framework internals

我的自定义组件

<ScrollView flex={1} backgroundColor="#eee">
      <Slider
        items={[...images, video]}
        keyExtractor={(t) => t}
        renderItem={(t, { width, height, index }) => (
          <Box backgroundColor="white" padding={25}>
            {index === images.length && (
              <Video
                source={{ uri: video }}
                rate={1.0}
                volume={1.0}
                isMuted={false}
                resizeMode="cover"
                useNativeControls={true}
                isLooping
                style={{
                  width: width - 50,
                  height: height - 50,
                }}
              />
            )}
            {index !== images.length && (
              <Image
                resizeMode="contain"
                source={{ uri: t }}
                style={{ 
                  width: width - 50,
                  height: height - 50,
                }}
              />
            )}
          </Box>
        )}
      />

那么解决此问题的正确方法是什么？

Answer 1

我认为最简单的解决方案是添加另一个条件

<ScrollView flex={1} backgroundColor="#eee">
  <Slider
    items={[...images, video]}
    keyExtractor={(t) => t}
    renderItem={(t, { width, height, index }) => (
      <Box backgroundColor="white" padding={25}>
        {index === images.length && video !== null && (
          <Video
            source={{ uri: video }}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            useNativeControls={true}
            isLooping
            style={{
              width: width - 50,
              height: height - 50,
            }}
          />
        )}
        {index !== images.length && (
          <Image
            resizeMode="contain"
            source={{ uri: t }}
            style={{ 
              width: width - 50,
              height: height - 50,
            }}
          />
        )}
      </Box>
    )}
  />

Answer 2

好吧，老实说，我不知道变量的类型，但是当您在这种情况下不使用布尔值时，就会发生这种情况

            {index !== images.length && (
              <Image
                resizeMode="contain"
                source={{ uri: t }}
                style={{ 
                  width: width - 50,
                  height: height - 50,
                }}
              />
            )}

以这种方式，尝试使用双重否定（!!）从变量获取布尔值。例如：

{!!someText && <Component />}

Answer 3

使用三元运算符（！）代替短路运算符（&&）。短路运算符可能会导致非布尔数据类型上的文本替换错误。

示例

<ScrollView flex={1} backgroundColor="#eee">
  <Slider
    items={[...images, video]}
    keyExtractor={(t) => t}
    renderItem={(t, { width, height, index }) => (
      <Box backgroundColor="white" padding={25}>
        {index === images.length ? (
          <Image
            resizeMode="contain"
            source={{ uri: t }}
            style={{ 
              width: width - 50,
              height: height - 50,
            }}
          />
        ) : (
          <Video
            source={{ uri: video }}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            useNativeControls={true}
            isLooping
            style={{
              width: width - 50,
              height: height - 50,
            }}
          />
        )}
      </Box>
    )}
  />