Я создавал приложение, которое обнаруживает еду по изображению, используя 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 и большинство вещей, которые преобразуют объект в строку, но это не сработало.
Сначала я даже не отправлял данные на другой экран, и это тоже выдавало ошибку.
Вам не хватает ключевого слова const перед функцией CameraScreen?
Я сейчас попробовал, но не помогло(┬┬﹏┬┬)
Попробуйте переместить определение styles над функцией CameraScreen.
Это тоже не работает
Я бы исследовал трассировку стека сверху вниз. По сути, он жалуется на компонент Text внутри DescriptionAccordionView, ни одного из которых я не вижу в предоставленном вами коде.
Я не понимаю, как DescriptionAccordionView и CameraScreen связаны, но теперь, когда я вижу первое, кажется, что передаваемый value - это не строка, а объект. Можете ли вы отладить и посмотреть, что передается? Посмотрите ошибку трассировки стека Error: Objects are not valid as a React child (found: object with keys {value}).
Я разместил полный код на github (включая экран с использованием DescriptionAccordionView) github.com/ywaidenchang/K-StreetFoodScanner
Я удалил свойство value, и оно сработало! Спасибо



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


const DescriptionAccordionView = (value) => { // value is most likely an object
return (
<View>
<Text>{value}</Text> // the Text component is expecting a string
</View>
);
};
Либо удалите value, либо используйте для него свойство для отображения в компоненте Text.
Попробуйте отладить эту строку
navigation.navigate("Info", {data: roboflowResult});, где «roboflowResult» может содержать больше ключей, чем может обработать метод «navigate». Примеры смотрите здесь