Как мне решить эту ошибку в expo React Native?

Я создавал приложение, которое обнаруживает еду по изображению, используя API обнаружения объектов expo и roboflow.

это код CameraScreen.js:

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useState, useRef } from 'react';
import { StyleSheet, TouchableOpacity, View, Alert } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome6';
import axios from 'axios';
import { useNavigation } from '@react-navigation/native';

CameraScreen = () => {
  const [facing, setFacing] = useState('back');
  const [permission, requestPermission] = useCameraPermissions();
  const cameraRef = useRef(null);
  const navigation = useNavigation();
  const [roboflowResult, setRoboflowResult] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  if (!permission) {
    return <View />;
  }

  if (!permission.granted) {
    requestPermission();
  }

  function toggleCameraFacing() {
    setFacing(current => (current === 'back' ? 'front' : 'back'));
  }
  
  const takePicture = async () => {
    if (cameraRef.current) {
      try {
        const options = { quality: 0.5, base64: true }; // Adjust quality as needed (0-1)
        const data = await cameraRef.current.takePictureAsync(options);
        const base64Data = data.base64;

        sendRoboflowRequest(base64Data);
        navigation.navigate("Info", {data: roboflowResult});

      } catch (error) {
        console.error(error);
      }
    }
  };

  function sendRoboflowRequest(data) {
    axios({
      method: "POST",
      url: "https://detect.roboflow.com/MY_MODEL/12",
      params: {
        api_key: "MY API KEY"
      },
      data: data,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
    .then(function(response) {
      let result = response.data.predictions;
      console.info(result);

      setRoboflowResult(JSON.stringify(result));      
    })
    .catch(function(error) {
      let errorMsg = error.message;
      console.info(errorMsg);

      setErrorMsg("Error Ocurred\nError Message: " + errorMsg);
    });
  };

  return (
    <View style = {styles.container}>
      <CameraView style = {styles.camera} facing = {facing} ref = {cameraRef}>
        <View style = {styles.buttonContainer}>
          <TouchableOpacity style = {styles.button} onPress = {toggleCameraFacing}>
            <Icon name = "camera-rotate" size = {50} />
          </TouchableOpacity>
          <TouchableOpacity style = {styles.button} onPress = {takePicture}>
            <Icon name = "camera" size = {50} />
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'transparent',
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
});

export default CameraScreen;

это вызывает у меня ошибку ниже:

Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead.

This error is located at:
    in RCTText (created by Text)
    in Text (created by DescriptionAccordionView)
    in RCTView (created by View)
    in View (created by DescriptionAccordionView)
    in DescriptionAccordionView (created by InfoScreen)
    in RCTView (created by View)
    in View
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by Collapsible)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by Collapsible)
    in Collapsible
    in RCTView (created by View)
    in View
    in Unknown (created by InfoScreen)
    in InfoScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous) (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by Stacks)
    in Stacks (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
 ERROR  [Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead.]

это код DescriptionAccordionView:

import { StyleSheet, Text, View } from 'react-native';

const DescriptionAccordionView = (value) => {
  return (
    <View>
      <Text>{value}</Text>
    </View>
  );
};

export default DescriptionAccordionView

Я думал, что это произошло потому, что объект не может быть отображен в реакции, поэтому я попытался превратить объект (результат) в строку, используя JSON.stringfy и большинство вещей, которые преобразуют объект в строку, но это не сработало.

Попробуйте отладить эту строку navigation.navigate("Info", {data: roboflowResult});, где «roboflowResult» может содержать больше ключей, чем может обработать метод «navigate». Примеры смотрите здесь

Mickers 25.05.2024 16:10

Сначала я даже не отправлял данные на другой экран, и это тоже выдавало ошибку.

Ywaidenchang 25.05.2024 16:16

Вам не хватает ключевого слова const перед функцией CameraScreen?

Mickers 25.05.2024 16:17

Я сейчас попробовал, но не помогло(┬┬﹏┬┬)

Ywaidenchang 25.05.2024 16:19

Попробуйте переместить определение styles над функцией CameraScreen.

Mickers 25.05.2024 16:22

Это тоже не работает

Ywaidenchang 25.05.2024 16:26

Я бы исследовал трассировку стека сверху вниз. По сути, он жалуется на компонент Text внутри DescriptionAccordionView, ни одного из которых я не вижу в предоставленном вами коде.

Mickers 25.05.2024 16:31

Я не понимаю, как DescriptionAccordionView и CameraScreen связаны, но теперь, когда я вижу первое, кажется, что передаваемый value - это не строка, а объект. Можете ли вы отладить и посмотреть, что передается? Посмотрите ошибку трассировки стека Error: Objects are not valid as a React child (found: object with keys {value}).

Mickers 25.05.2024 16:39

Я разместил полный код на github (включая экран с использованием DescriptionAccordionView) github.com/ywaidenchang/K-StreetFoodScanner

Ywaidenchang 26.05.2024 03:20

Я удалил свойство value, и оно сработало! Спасибо

Ywaidenchang 26.05.2024 03:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
10
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
const DescriptionAccordionView = (value) => { // value is most likely an object
 return (
   <View>
     <Text>{value}</Text> // the Text component is expecting a string
   </View>
 );
};

Либо удалите value, либо используйте для него свойство для отображения в компоненте Text.

Другие вопросы по теме