為什么當我按下可觸摸的不透明度時，它會給出對象無效的錯誤作為反應孩子

Question

這是相同的主要 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 知識，但是這個錯誤讓我很沮喪，因為我無法找出問題所在。 關於為什么會發生這種情況以及如何避免這種情況的任何想法？

Answer 1

onChange和onChangeText的區別在於onChange接收一個事件對象，而 onChangeText 只接收文本。 所以你試圖設置優先級（某個事件對象）而不是設置優先級（輸入的優先級）。 建議也將 onChangeText 用於優先級字段：

<TextInput
  placeholder="Enter Priority"
  style={tailwind("m-2 border p-1 bg-white")}
  onChangeText={(text) => setPriority(text)}
/>