這是相同的主要 app.js 代碼：
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
SafeAreaView,
TextInput,
Platform,
TouchableOpacity,
} from "react-native";
import tailwind from "tailwind-rn";
export default function App() {
const [task, setTask] = useState("");
const [description, setDescription] = useState("");
const [priority, setPriority] = useState(0);
const [showCreatedTask, setShowCreatedTask] = useState(false);
return (
<SafeAreaView
style={[
styles.AndroidSafeArea,
tailwind("flex justify-center items-center bg-blue-800"),
]}
>
<View
style={tailwind(
"border border-gray-300 w-4/5 rounded-lg bg-blue-200 p-3"
)}
>
<TextInput
placeholder="Enter Task"
style={tailwind("m-2 border p-1 bg-white")}
onChangeText={(text) => setTask(text)}
/>
<TextInput
placeholder="Enter Description"
style={tailwind("m-2 border p-1 bg-white")}
onChangeText={(text) => setDescription(text)}
/>
<TextInput
placeholder="Enter Priority"
style={tailwind("m-2 border p-1 bg-white")}
onChange={(text) => setPriority(text)}
/>
<View style={tailwind("")}>
<TouchableOpacity
style={tailwind(
"bg-black p-2 m-2 rounded-full flex-col items-center"
)}
onPress={() => {
setShowCreatedTask(true);
}}
>
<Text style={tailwind("text-white")}>Create Task</Text>
</TouchableOpacity>
<TouchableOpacity
style={tailwind(
"bg-transparent p-2 m-2 rounded-full border flex-col items-center"
)}
>
<Text style={tailwind("text-black")}>Clear fields</Text>
</TouchableOpacity>
</View>
</View>
{showCreatedTask && (
<View>
<Text>{task}</Text>
<Text>{description}</Text>
<Text>{priority}</Text>
</View>
)}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 0.5,
alignItems: "center",
borderStyle: "solid",
borderColor: "#000",
padding: 10,
height: "50%",
justifyContent: "space-between",
},
AndroidSafeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === "android" ? 25 : 0,
},
});
這是用戶界面的樣子：
但是當我點擊創建任務時，它會導致以下錯誤：
Warning: This synthetic event is reused for pe
rformance reasons. If you're seeing this, you're accessing the property `type` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.
at node_modules\react-native\Libraries\LogBox\LogBox.js:174:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
- ... 29 more stack frames from framework internals
Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.
This error is located at:
in RCTText
in TouchableText (created by Text)
in Text (created by App)
in RCTView (created by View)
in View (created by App)
in RCTView (created by View)
in View
in SafeAreaView (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer, js engine: hermes
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
- ... 33 more stack frames from framework internals
Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `type` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.
at node_modules\react-native\Libraries\LogBox\LogBox.js:174:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
- ... 31 more stack frames from framework internals
Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.
This error is located at:
in RCTText
in TouchableText (created by Text)
in Text (created by App)
in RCTView (created by View)
in View (created by App)
in RCTView (created by View)
in View
in SafeAreaView (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer, js engine: hermes
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
- ... 24 more stack frames from framework internals
我是 react-native 的新手，但是我知道一些 Reactjs。所以我嘗試在這里應用我所有的 React 知識，但是這個錯誤讓我很沮喪，因為我無法找出問題所在。關于為什么會發生這種情況以及如何避免這種情況的任何想法？
uj5u.com熱心網友回復：
之間的差onChange和onChangeText是的onChange接收事件物件，并onChangeText只接收的文本。所以你試圖設定優先級（某個事件物件）而不是設定優先級（輸入的優先級）。建議也將 onChangeText 用于優先級欄位：
<TextInput
placeholder="Enter Priority"
style={tailwind("m-2 border p-1 bg-white")}
onChangeText={(text) => setPriority(text)}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338117.html
標籤：javascript 反应 反应原生 跨平台
下一篇：useEffect無法更新狀態