渲染没有返回任何内容。这通常意味着缺少返回语句答案

【问题标题】：Nothing was returned from render. This usally means a return statement is missing渲染没有返回任何内容。这通常意味着缺少返回语句
【发布时间】：2021-06-24 23:52:33
【问题描述】：

我使用 React Native Camera 来扫描条形码，现在我正尝试在条形码与数据库中的项目检查时显示模态。

我得到的错误是：

错误：checkBarcode(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

我应该怎么做才能让它工作。我做错了什么？

代码：

CheckBarcode(scanResult) {
  const product = DataBase.find((codeMetadata) => {
    return codeMetadata.id === scanResult.data;
  });

  if (this.barCodeRead) {
    if (product) {
      this.barCodeRead = false;
      this.setModalVisible(true);
      return (
        <View>
          <Text>{product.company}</Text>
          <Text>{product.name}</Text>
          <Text>{product.gluten}</Text>
          <Text>{product.ingredients}</Text>
          <Text>{product.id}</Text>
        </View>
      );
    } else {
      this.barCodeRead = true;
      return (
        <View>
          <Text>Produkten finns inte</Text>
        </View>
      );
    }
  }
}

模态：

<Modal
  animationType="fade"
  transparent={true}
  visible={modalVisible}
  onRequestClose={() => {
    this.setModalVisible(!modalVisible);
  }}
>
  <View
    style={{
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "rgba(0,0,0,0.8)",
    }}
  >
    <View
      style={{
        backgroundColor: "#fff",
        padding: 35,
        borderRadius: 10,
        width: "80%",
        height: "80%",
      }}
    >
      <View
        style={{
          borderTopWidth: 1,
          borderTopColor: "#000",
          marginBottom: 10,
        }}
      >
        <this.CheckBarcode />
      </View>
      <View>
        <TouchableOpacity
          style={{}}
          onPress={() => {
            this.setModalVisible(!modalVisible);
            this.barCodeRead = true;
          }}
        >
          <Text style={{ alignSelf: "center", color: "#FF0000" }}>Skanna</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
</Modal>

【问题讨论】：

@AjeetShah 是的，我忘了补充，但它仍然在抱怨同样的错误
我已经修复了，你可以看到上面更新的代码^^仍然是同样的错误
我不明白为什么我的回答对你不起作用。我会在我的回答中建议一个 change - this.barCodeRead 应该移动到状态 var 以便它读取 this.state.barCodeRead 以便 UI 将在它更改时重新呈现（更新）。
@AjeetShah 你能在 github 上给我看吗？这样更容易理解
按照步骤操作，它应该可以工作

标签： javascript reactjs react-native react-native-camera

【解决方案1】：

我自己修好了。只是从项目中暂停一下，我就意识到解决问题是多么容易。

this.state = {
      modalVisible: false,
      company: [],
      name: [],
      gluten: [],
      ingredients: [],
      id: [],
}

checkBarcode(scanResult) {
    const product = DataBase.find((codeMetadata) => {
      return codeMetadata.id === scanResult.data;
    });

    if (this.barCodeRead) {
      if (product) {
        this.barCodeRead = false;
        this.setState({
          modalVisible: true,
          company: [product.company],
          name: [product.name],
          gluten: [product.gluten],
          ingredients: [product.ingredients],
          id: [product.id],
        });
      } else {
        
      }
    }
  }

【讨论】：

【解决方案2】：

尝试以下代码更改，因为如果 barCodeRead 具有 null 值，则必须返回 JSX 或 null

CheckBarcode(scanResult) {
    const product = DataBase.find((codeMetadata) => {
      return codeMetadata.id === scanResult.data;
    });

    if (this.barCodeRead) {
      if (product) {
        this.barCodeRead = false;
        this.setModalVisible(true);
        return (
          <View>
            <Text>{product.company}</Text>
            <Text>{product.name}</Text>
            <Text>{product.gluten}</Text>
            <Text>{product.ingredients}</Text>
            <Text>{product.id}</Text>
          </View>
        );
      } else {
        this.barCodeRead = true;
        return (
          <View>
            <Text>Produkten finns inte</Text>
          </View>
        );
      }
    } else {
      return (
        <View>
          <Text>No product</Text>
        </View>
      );
    }
  }

【讨论】：

模态显示应该是这样，但如果我扫描我知道在我的数据库中的条形码，它只会显示无产品。但是，如果我使用 Alert.alert，它的工作正常并从数据库中显示正确的产品？？？
你能不能试试 console.log(product)。检查产品是否可用？
是的，它在控制台中显示了正确的产品
你也可以通过 console.log(this.barCodeRead) 检查 this.barCodeRead 的值吗？
它应该显示真假

【解决方案3】：

您需要从组件中的渲染函数返回一些JSX。如果您不想在 UI 上显示任何内容，可以返回 null。一个例子：

if (this.barCodeRead) {
  if (product) {
    return (
      <View>
        <Text>{product.company}</Text>
      </View>
    );
  } else {
    return (
      <View>
        <Text>Produkten finns inte</Text>
      </View>
    );
  }
 }
 return <div>No Data to show</div> // or null

【讨论】：

通过这样做，模式中唯一显示的文本将是例如没有数据显示。当我使用 alert.alert 时它工作正常，但我想要比丑陋的警报更好的东西
还是一样，顺便说一句this.barCodeRead 仅用于停止条码扫描仪进行多次扫描。我在 this.state 上方有 this.barCodeRead = true。
不，还是一样的问题。以下是完整代码的 pastebin：pastebin.com/ZiWHzNLf
我在 github 上添加了一个问题，让我们在那里进行对话