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

【问题标题】：Warning: This synthetic event is reused for performance reasons React-Native警告：出于性能原因，此合成事件被重用 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 返回输入的值。

标签： reactjs forms react-native textinput

【解决方案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

  })()
}

【讨论】：