警告：出于性能原因，此合成事件被重用 React-Native

Posted 2023-04-18

【中文标题】警告：出于性能原因，此合成事件被重用 React-Native

【英文标题】：Warning: This synthetic event is reused for performance reasons React-Native

【发布时间】：2021-01-04 09:21:54

【问题描述】：

我有一个 React-Native 登录组件，其中我有两个 TextInput 组件——电子邮件、密码——都定义了 onChangeText。 当文本发生变化时，我想更新formData的状态。

...

const [formData, setFormData] = useState(
  email:"",
  password:"",
)

...
const login = async () => 
  const config = headers:"Content-Type":"application/json";
  const body = JSON.stringify(formData); // ---- THIS THROWS ERROR
  try
    const res = await axios.post("api/login", body, config);

    // Do something with data code...

   catch(e) 
    console.error(e)
  


<TextInput onChangeText=text=>setFormData(...formData, email:text)
<TextInput onChangeText=text=>setFormData(...formData, password:text)
<TouchableOpacity onPress=login/>
...

问题 最终，我确实想将表单数据发送到application/json 作为Content-Type 的api 端点。但是，当我将console.log 与formData 分开时，它不是只有email 和password 键的对象......而且我不能JSON.stringify 它也因为它是一些循环数据或其他东西。 .. 我怀疑是 TextInput 的 onTextChange 道具对 formData 做了一些事情... 另外，当我发布发布请求时，它会在终端中发送多个Warning: This synthetic event is reused for performance reasons 我怎样才能解决这个问题？

附言 这是更完整的错误消息

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're %s `%s` on a released/nullified synthetic event. %s. If you must keep the original synthetic event around, use event.persist(). See https://fb. me/react-event-pooling for more information., accessing the property, type, This is set to null

这是formData的console.log

Class 
[1] [22:05:39]   "_dispatchInstances": FiberNode 
[1] [22:05:39]     "tag": 5,
[1] [22:05:39]     "key": null,
[1] [22:05:39]     "type": "RCTView",
[1] [22:05:39]   ,
[1] [22:05:39]   "_dispatchListeners": [Function onResponderRelease],
[1] [22:05:39]   "_targetInst": FiberNode 
[1] [22:05:39]     "tag": 5,
[1] [22:05:39]     "key": null,
[1] [22:05:39]     "type": "RCTView",
[1] [22:05:39]   ,
[1] [22:05:39]   "bubbles": undefined,
[1] [22:05:39]   "cancelable": undefined,
[1] [22:05:39]   "currentTarget": 27,
[1] [22:05:39]   "defaultPrevented": undefined,
[1] [22:05:39]   "dispatchConfig": Object 
[1] [22:05:39]     "dependencies": Array [
[1] [22:05:39]       "topTouchCancel",
[1] [22:05:39]       "topTouchEnd",
[1] [22:05:39]     ],
[1] [22:05:39]     "registrationName": "onResponderRelease",
[1] [22:05:39]   ,
[1] [22:05:39]   "eventPhase": undefined,
[1] [22:05:39]   "isDefaultPrevented": [Function functionThatReturnsFalse],
[1] [22:05:39]   "isPropagationStopped": [Function functionThatReturnsFalse],
[1] [22:05:39]   "isTrusted": undefined,
[1] [22:05:39]   "nativeEvent": Object 
[1] [22:05:39]     "changedTouches": Array [
[1] [22:05:39]       [Circular],
[1] [22:05:39]     ],
[1] [22:05:39]     "identifier": 1,
[1] [22:05:39]     "locationX": 9,
[1] [22:05:39]     "locationY": 4,
[1] [22:05:39]     "pageX": 84.5,
[1] [22:05:39]     "pageY": 589.5,
[1] [22:05:39]     "target": 25,
[1] [22:05:39]     "timestamp": 74210486.447524,
[1] [22:05:39]     "touches": Array [],
[1] [22:05:39]   ,
[1] [22:05:39]   "target": 25,
[1] [22:05:39]   "timeStamp": 1600351538612,
[1] [22:05:39]   "touchHistory": Object 
[1] [22:05:39]     "indexOfSingleActiveTouch": 1,
[1] [22:05:39]     "mostRecentTimeStamp": 74210486.447524,
[1] [22:05:39]     "numberActiveTouches": 0,
[1] [22:05:39]     "touchBank": Array [
[1] [22:05:39]       undefined,
[1] [22:05:39]       Object 
[1] [22:05:39]         "currentPageX": 84.5,
[1] [22:05:39]         "currentPageY": 589.5,
[1] [22:05:39]         "currentTimeStamp": 74210486.447524,
[1] [22:05:39]         "previousPageX": 84.5,
[1] [22:05:39]         "previousPageY": 589.5,
[1] [22:05:39]         "previousTimeStamp": 74210358.22676201,
[1] [22:05:39]         "startPageX": 84.5,
[1] [22:05:39]         "startPageY": 589.5,
[1] [22:05:39]         "startTimeStamp": 74210358.22676201,
[1] [22:05:39]         "touchActive": false,
[1] [22:05:39]       ,
[1] [22:05:39]     ],
[1] [22:05:39]   ,
[1] [22:05:39]   "type": undefined,
[1] [22:05:39] 

【问题讨论】：

你能把零食发给here

你能看到TextInput 组件是从哪里来的吗？

@PrateekThapa 它是内置的，这是 react-native 而不是 reactjs。

从错误中听起来您正在保留事件参考。如果onChangeText 将回调传递给事件而不是像它应该传递的那样只传递文本值，这将完全有意义。尝试在事件处理程序中记录 text 参数。

我知道。代码签出。我只是想知道TextInput 是否是自定义的。 onChangeText 返回输入的值。

【参考方案1】：

这是一种解决方法： 与其总结formData，不如解构它，然后创建一个新对象——JSON.stringify它（新对象），然后将其提交到req正文中。

...
const [formData, setFormData] = useState(
  email: "",
  password: "",
)
const email, password = formData;

const login = () => 
  const config = 
    headers: "Content-Type":"application/json"
  
  const body = JSON.stringify(email, password)
  (async()=>
    const res = await axios.post("/endpoint", body, config)

    ... do something with the res

  )()