变量不断改变自己的价值成为每个视图道具
Variable Keeps Changing its Own Value to be Every View Prop
我在 React Native 中工作，遇到了一个我以前从未见过的错误。我有几个嵌套的映射函数来帮助呈现用户帐户列表。这样做的目的是列出每个用户，以便您可以在群聊中添加或删除他们。这意味着我需要跟踪每个用户的 ID 并将其与群聊中已有用户的 ID 进行比较（这样您就可以删除已经在群聊中的用户并添加不在群聊中的用户，反之亦然）。我面临的问题是，无论我在函数中放入什么变量来指示是否显示 add 按钮或 remove 按钮，输入函数的 id 都会不断更改其值。我在每个函数调用之前都有 console.log 语句，它每次都会正确记录用户的 uuid，但是一旦它进入函数，值就会以某种方式从 uuid 变为 JSON 对象，看起来是所有可能的 View 道具。我的代码如下...
import React, {useState} from "react";
import { View, Text, ScrollView, TouchableOpacity, Touchable } from 'react-native'
import { useQuery } from "@apollo/client";
import { DRIVERSGETDRIVERSFROMDSP } from "../../../GraphQL/operations";
import Banner from "../../../Global/Banner";
import Loading from "../../../Global/Loading";
import { ContactStyles } from "../../../Styles/CommunicationStyles";
import nameObj from "../../../Hooks/handleNameCaseChange";
import dateObj from "../../../Hooks/handleDateTime";
import { useRecoilState } from 'recoil'
import { threadState, userState } from "../../../Recoil/atoms";
const Contacts = ({creating}) => {
// Gets all Drivers from DSP
const {loading: loading, error: error, data: queryData} = useQuery(DRIVERSGETDRIVERSFROMDSP)
// -------------------- Recoil and UseState ----------------------
// Recoil
// Gets User
const [user, setUser] = useRecoilState(userState);
// Gets Thread
const [thread, setThread] = useRecoilState(threadState)
// UseState
// keeps track of driver contacts added to groupchat
const[newGuests, setNewGuests] = useState([])
// -------------------- Recoil and UseState ----------------------
// --------------- Rendering and Generating Functions ------------
const renderRoster = (list) => {
let i = 0
return( list.map( (driver) => {
const namer = nameObj(driver.firstname, driver.lastname)
i++
return(
<View style={ContactStyles.card} key={i}>
<View style={ContactStyles.image}><Text>Image</Text></View>
<View style={ContactStyles.nameView}><Text style={ContactStyles.title}>{namer.first} {namer.last} </Text></View>
{determineAddOrRemove(driver.id)}
<View style={ContactStyles.divider} />
</View>
)
}))
}
const determineAddOrRemove = (selectedId) => {
if (creating){
if (newGuests.length > 0){
newGuests.forEach( (driver) => {
if (driver.id === selectedId){
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.removeButton} onPress={(s) => handleRemoveClick(selectedId)}>
<View><Text style={ContactStyles.removeText}>Remove</Text></View>
</TouchableOpacity>
)
}
})
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.addButton} onPress={(selectedId) => handleAddClick(selectedId)}>
<View><Text style={ContactStyles.addText}>Add</Text></View>
</TouchableOpacity>
)
}
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.addButton} onPress={(selectedId) => handleAddClick(selectedId)}>
<View><Text style={ContactStyles.addText}>Add</Text></View>
</TouchableOpacity>
)
}
thread = [...thread, newGuests]
thread.forEach( (driver) => {
if (driver.id === selectedId){
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.removeButton} onPress={(selectedId) => handleRemoveClick(selectedId)}>
<View><Text style={ContactStyles.removeText}>Remove</Text></View>
</TouchableOpacity>
)
}
})
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.addButton} onPress={(selectedId) => handleAddClick(selectedId)}>
<View><Text style={ContactStyles.addText}>Add</Text></View>
</TouchableOpacity>
)
}
// --------------- Rendering and Generating Functions ------------
// -------------------------- Handlers ---------------------------
const handleAddClick = (selectedId) => {
console.log('----------------------------')
console.log(selectedId)
setNewGuests([...newGuests, selectedId])
// console.log(newGuests)
}
const handleRemoveClick = (selectedId) => {
console.log(selectedId)
let newestVersion = []
newGuests.forEach( (guest) => {
if (guest.id !== selectedId){
newestVersion.push(guest)
}
})
setNewGuests(newestVersion)
// console.log(newGuests)
}
// -------------------------- Handlers ---------------------------
if (!loading && queryData){
let allDrivers = [...queryData.driverGetDriversFromDsp.drivers]
return (
<View>
<Banner />
<View>
</View>
<ScrollView contentContainerStyle={ContactStyles.container}>
{renderRoster(allDrivers)}
</ScrollView>
</View>
)
}
else{
return(
<Loading />
)
}
}
export default Contacts
问题似乎源于 determineAddOrRemove。就在该函数中每个可能的 return 值之前，uuid 正确显示，如记录的语句所示...
941904b3-77c4-46a4-8cd3-c3d2efbb8459
dd87ed5d-77ed-4ce4-97f4-9e8eca228ce2
31f5922e-8aa8-4ffa-adb4-a4e901b43d3d
add7e664-ec9d-4c51-8e4e-6961e8457b07
713d0da3-9ca5-407c-be1b-fce8bc71d974
03e5e931-154b-44a1-a59c-da5d0de89faa
74ce9746-1998-44f8-9699-3206f2345c88
9e775542-c102-4f66-a597-6d6e53a4587e
0d8d604a-e0bc-4f83-b358-fd6a2fd105a3
cb7cc30e-dda7-41f3-bbb2-641356c55216
f8155be1-f183-4ad2-ba43-2e0b0996ac83
530e363a-564d-4b0a-b1bc-e6eb0ab9554b
aa4fa720-99f1-4ed4-a4a3-7eb57f4eaa6b
b931215d-c59d-4774-8ffe-0ef12ef37532
e4537807-1dda-487a-aecd-ac8afcca6397
ac403235-e207-4452-a09a-6fa9fc6994a5
eaa21ab3-d006-45b0-92fb-bc056c2ec3fb
da2375a9-b014-4dbe-aecd-b946be3b1ad6
fa367846-1d91-4bcf-9288-de96e53e27f9
3ee9f03c-a924-4913-8af0-c9c84fb061f0
721d68c4-a412-4e9b-bea7-a6dddfd96934
a6a7430a-0601-4fb3-b474-6d7e9238c455
ea89422b-190b-4ff8-8e3e-9389c32436a5
7d4b7374-f19f-429d-af0a-e0d5f1c57f24
6961fbeb-4786-4945-98bf-5f49e9e82579
52817972-cfdc-4da1-9c98-a1f0583c49e0
12f2b73d-a9a7-455d-8c2a-db79b5236f3e
9a507278-726a-4e56-9f83-e3eceaa19cfc
46290353-8d4f-4e51-b419-4d78a7f5431c
93ed3e6e-3e60-4c8d-8890-72e27586ce26
6a8d1fc3-68fb-4f80-b92f-701312ec9ad1
248ffde5-edf6-4ed9-9016-d41e16ce09bc
c1f89d3b-ad3c-4118-be5a-73e1317bce8c
e996244a-4b78-46a2-8985-50692c467eec
00308aec-57c0-4f33-98dc-cfd21446cc62
34d3d2c1-a23e-41f2-b0a9-2cabbd4d80bc
495763ef-6ea3-45bb-836a-b75d49a77dca
c445c512-44d8-4004-90fb-9ae41802eda9
18125066-09c9-42f2-acb2-82143c890ad0
3f5ac05d-f111-4ca2-8512-1a802d85d3a9
f36626f9-2cd0-4b7a-b413-09183f4eaa4c
9ffc4980-04d8-4c53-bbdb-3b0615e6a757
2f4917f9-f523-4834-9c58-86c76f2fd462
ccf79ee2-eec7-47b5-853c-3179c0f2df62
55c6d2a0-77ea-4330-88ca-7f1b49a0e891
2c178386-23af-4c35-aa25-d65d4b3237f4
6544ca09-5448-4668-ad8d-2c30d15a7bdb
9ef8ebfc-a850-492e-a717-64340360709f
8ef3b528-e0f3-4058-8410-2bb77eacf322
7d3a4ae7-7d03-4472-b75b-73497e099e3c
c337eb3f-ca38-4932-a530-d9c7edc33619
e5a9cb7f-408b-4dd2-99d4-bc4e17a7a557
cc5f3f92-0854-4a3d-974c-d73ace24b30a
a98feda1-9a33-484e-9cce-b25fdc9765bd
2f290674-be2a-4871-8128-19e5e29341d6
302d07b1-6631-43a2-89f8-78940b794759
d2e745c1-e24c-4b25-a2de-dd73b8de5948
27bf0afd-98ec-45c9-bc94-5393aed6d05e
c0eb9270-74ae-4979-997d-242bf76d288a
6a5a1fb9-b449-49ee-ad0b-d481dbf4d2b9
10309a26-2f7a-4bcc-9214-f16fd6abb418
6113e684-6aa0-4614-8899-9d8740148e29
838875fd-f5ed-4f43-a150-589ad31bc889
a3e088e4-88ad-40c1-acf5-b4f953c80275
b5423188-b5cb-40f7-8e4b-6c69d56fd5bd
但每次我单击 Add 或 Remove 并触发 handleAddClick 或 handleRemoveClick 然后触发其中的 console.log 语句时，一旦清理 uuid 将 return 这个...
Class {
"_dispatchInstances": FiberNode {
"tag": 5,
"key": null,
"type": "RCTView",
},
"_dispatchListeners": [Function onResponderRelease],
"_targetInst": FiberNode {
"tag": 5,
"key": null,
"type": "RCTView",
},
"bubbles": undefined,
"cancelable": undefined,
"currentTarget": ReactNativeFiberHostComponent {
"_children": Array [
ReactNativeFiberHostComponent {
"_children": Array [
ReactNativeFiberHostComponent {
"_children": Array [
3925,
],
"_internalFiberInstanceHandleDEV": FiberNode {
"tag": 5,
"key": null,
"type": "RCTText",
},
"_nativeTag": 3927,
"viewConfig": Object {
"directEventTypes": Object {
"topInlineViewLayout": Object {
"registrationName": "onInlineViewLayout",
},
"topTextLayout": Object {
"registrationName": "onTextLayout",
},
},
"uiViewClassName": "RCTText",
"validAttributes": Object {
"accessibilityActions": true,
"accessibilityHint": true,
"accessibilityLabel": true,
"accessibilityLiveRegion": true,
"accessibilityRole": true,
"accessibilityState": true,
"accessibilityValue": true,
"accessible": true,
"adjustsFontSizeToFit": true,
"allowFontScaling": true,
"collapsable": true,
"dataDetectorType": true,
"disabled": true,
"ellipsizeMode": true,
"importantForAccessibility": true,
"isHighlighted": true,
"maxFontSizeMultiplier": true,
"minimumFontScale": true,
"nativeID": true,
"needsOffscreenAlphaCompositing": true,
"numberOfLines": true,
"onAccessibilityAction": true,
"onAccessibilityEscape": true,
"onAccessibilityTap": true,
"onInlineViewLayout": true,
"onLayout": true,
"onMagicTap": true,
"onTextLayout": true,
"pointerEvents": true,
"renderToHardwareTextureAndroid": true,
"selectable": true,
"selectionColor": true,
"shouldRasterizeIOS": true,
"style": Object {
"alignContent": true,
"alignItems": true,
"alignSelf": true,
"aspectRatio": true,
"backfaceVisibility": true,
"backgroundColor": Object {
"process": [Function processColor],
},
"borderBottomColor": Object {
"process": [Function processColor],
},
"borderBottomEndRadius": true,
"borderBottomLeftRadius": true,
"borderBottomRightRadius": true,
"borderBottomStartRadius": true,
"borderBottomWidth": true,
"borderColor": Object {
"process": [Function processColor],
},
"borderEndColor": Object {
"process": [Function processColor],
},
"borderEndWidth": true,
"borderLeftColor": Object {
"process": [Function processColor],
},
"borderLeftWidth": true,
"borderRadius": true,
"borderRightColor": Object {
"process": [Function processColor],
},
"borderRightWidth": true,
"borderStartColor": Object {
"process": [Function processColor],
},
"borderStartWidth": true,
"borderStyle": true,
"borderTopColor": Object {
"process": [Function processColor],
},
"borderTopEndRadius": true,
"borderTopLeftRadius": true,
"borderTopRightRadius": true,
"borderTopStartRadius": true,
"borderTopWidth": true,
"borderWidth": true,
"bottom": true,
"color": Object {
"process": [Function processColor],
},
"decomposedMatrix": true,
"direction": true,
"display": true,
"elevation": true,
"end": true,
"flex": true,
"flexBasis": true,
"flexDirection": true,
"flexGrow": true,
"flexShrink": true,
"flexWrap": true,
"fontFamily": Object {
"process": [Function processFontFamily],
},
"fontSize": true,
"fontStyle": true,
"fontVariant": true,
"fontWeight": true,
"height": true,
"includeFontPadding": true,
"justifyContent": true,
"left": true,
"letterSpacing": true,
"lineHeight": true,
"margin": true,
"marginBottom": true,
"marginEnd": true,
"marginHorizontal": true,
"marginLeft": true,
"marginRight": true,
"marginStart": true,
"marginTop": true,
"marginVertical": true,
"maxHeight": true,
"maxWidth": true,
"minHeight": true,
"minWidth": true,
"opacity": true,
"overflow": true,
"overlayColor": Object {
"process": [Function processColor],
},
"padding": true,
"paddingBottom": true,
"paddingEnd": true,
"paddingHorizontal": true,
"paddingLeft": true,
"paddingRight": true,
"paddingStart": true,
"paddingTop": true,
"paddingVertical": true,
"position": true,
"resizeMode": true,
"right": true,
"rotation": true,
"scaleX": true,
"scaleY": true,
"shadowColor": Object {
"process": [Function processColor],
},
"shadowOffset": Object {
"diff": [Function sizesDiffer],
},
"shadowOpacity": true,
"shadowRadius": true,
"start": true,
"textAlign": true,
"textAlignVertical": true,
"textDecorationColor": Object {
"process": [Function processColor],
},
"textDecorationLine": true,
"textDecorationStyle": true,
"textShadowColor": Object {
"process": [Function processColor],
},
"textShadowOffset": true,
"textShadowRadius": true,
"textTransform": true,
"tintColor": Object {
"process": [Function processColor],
},
"top": true,
"transform": Object {
"process": [Function processTransform],
},
"transformMatrix": true,
"translateX": true,
"translateY": true,
"width": true,
"writingDirection": true,
"zIndex": true,
},
"testID": true,
"textBreakStrategy": true,
},
},
},
],
"_internalFiberInstanceHandleDEV": FiberNode {
"tag": 5,
"key": null,
"type": "RCTView",
},
"_nativeTag": 3929,
"viewConfig": Object {
"Commands": Object {},
"bubblingEventTypes": Object {
"topAssetDidLoad": Object {
"phasedRegistrationNames": Object {
"bubbled": "onAssetDidLoad",
"captured": "onAssetDidLoadCapture",
},
},
"topBlur": Object {
"phasedRegistrationNames": Object {
"bubbled": "onBlur",
"captured": "onBlurCapture",
},
},
"topChange": Object {
"phasedRegistrationNames": Object {
"bubbled": "onChange",
"captured": "onChangeCapture",
},
},
"topEndEditing": Object {
"phasedRegistrationNames": Object {
"bubbled": "onEndEditing",
"captured": "onEndEditingCapture",
},
},
"topFocus": Object {
"phasedRegistrationNames": Object {
"bubbled": "onFocus",
"captured": "onFocusCapture",
},
},
"topKeyPress": Object {
"phasedRegistrationNames": Object {
"bubbled": "onKeyPress",
"captured": "onKeyPressCapture",
},
},
"topPress": Object {
"phasedRegistrationNames": O...(truncated to the first 10000 characters)
我试过更改变量的名称，但没有。当我将一个静态值放入函数中时（例如将 handleAddClick(selectedId) 更改为 handleAddClick("1234") 它将打印我期望的内容，在本例中为 1234 但是我放入的任何变量都会立即更改其值我刚刚在上面展示的那个大混乱。过去有没有人经历过这样的事情and/or对如何解决这个问题有什么想法？
Touchable传入onPress函数的参数是一个GestureResponderEvent。您正在将其重命名为 selectedId，然后将其添加到您的列表中。
onPress={(selectedId) => handleAddClick(selectedId)
你的意思可能是 onPress={() => handleAddClick(selectedId)，但你没有显示 selectedId 的来源，所以我不能肯定地说。
我在 React Native 中工作，遇到了一个我以前从未见过的错误。我有几个嵌套的映射函数来帮助呈现用户帐户列表。这样做的目的是列出每个用户，以便您可以在群聊中添加或删除他们。这意味着我需要跟踪每个用户的 ID 并将其与群聊中已有用户的 ID 进行比较（这样您就可以删除已经在群聊中的用户并添加不在群聊中的用户，反之亦然）。我面临的问题是，无论我在函数中放入什么变量来指示是否显示 add 按钮或 remove 按钮，输入函数的 id 都会不断更改其值。我在每个函数调用之前都有 console.log 语句，它每次都会正确记录用户的 uuid，但是一旦它进入函数，值就会以某种方式从 uuid 变为 JSON 对象，看起来是所有可能的 View 道具。我的代码如下...
import React, {useState} from "react";
import { View, Text, ScrollView, TouchableOpacity, Touchable } from 'react-native'
import { useQuery } from "@apollo/client";
import { DRIVERSGETDRIVERSFROMDSP } from "../../../GraphQL/operations";
import Banner from "../../../Global/Banner";
import Loading from "../../../Global/Loading";
import { ContactStyles } from "../../../Styles/CommunicationStyles";
import nameObj from "../../../Hooks/handleNameCaseChange";
import dateObj from "../../../Hooks/handleDateTime";
import { useRecoilState } from 'recoil'
import { threadState, userState } from "../../../Recoil/atoms";
const Contacts = ({creating}) => {
// Gets all Drivers from DSP
const {loading: loading, error: error, data: queryData} = useQuery(DRIVERSGETDRIVERSFROMDSP)
// -------------------- Recoil and UseState ----------------------
// Recoil
// Gets User
const [user, setUser] = useRecoilState(userState);
// Gets Thread
const [thread, setThread] = useRecoilState(threadState)
// UseState
// keeps track of driver contacts added to groupchat
const[newGuests, setNewGuests] = useState([])
// -------------------- Recoil and UseState ----------------------
// --------------- Rendering and Generating Functions ------------
const renderRoster = (list) => {
let i = 0
return( list.map( (driver) => {
const namer = nameObj(driver.firstname, driver.lastname)
i++
return(
<View style={ContactStyles.card} key={i}>
<View style={ContactStyles.image}><Text>Image</Text></View>
<View style={ContactStyles.nameView}><Text style={ContactStyles.title}>{namer.first} {namer.last} </Text></View>
{determineAddOrRemove(driver.id)}
<View style={ContactStyles.divider} />
</View>
)
}))
}
const determineAddOrRemove = (selectedId) => {
if (creating){
if (newGuests.length > 0){
newGuests.forEach( (driver) => {
if (driver.id === selectedId){
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.removeButton} onPress={(s) => handleRemoveClick(selectedId)}>
<View><Text style={ContactStyles.removeText}>Remove</Text></View>
</TouchableOpacity>
)
}
})
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.addButton} onPress={(selectedId) => handleAddClick(selectedId)}>
<View><Text style={ContactStyles.addText}>Add</Text></View>
</TouchableOpacity>
)
}
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.addButton} onPress={(selectedId) => handleAddClick(selectedId)}>
<View><Text style={ContactStyles.addText}>Add</Text></View>
</TouchableOpacity>
)
}
thread = [...thread, newGuests]
thread.forEach( (driver) => {
if (driver.id === selectedId){
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.removeButton} onPress={(selectedId) => handleRemoveClick(selectedId)}>
<View><Text style={ContactStyles.removeText}>Remove</Text></View>
</TouchableOpacity>
)
}
})
console.log(selectedId)
return(
<TouchableOpacity style={ContactStyles.addButton} onPress={(selectedId) => handleAddClick(selectedId)}>
<View><Text style={ContactStyles.addText}>Add</Text></View>
</TouchableOpacity>
)
}
// --------------- Rendering and Generating Functions ------------
// -------------------------- Handlers ---------------------------
const handleAddClick = (selectedId) => {
console.log('----------------------------')
console.log(selectedId)
setNewGuests([...newGuests, selectedId])
// console.log(newGuests)
}
const handleRemoveClick = (selectedId) => {
console.log(selectedId)
let newestVersion = []
newGuests.forEach( (guest) => {
if (guest.id !== selectedId){
newestVersion.push(guest)
}
})
setNewGuests(newestVersion)
// console.log(newGuests)
}
// -------------------------- Handlers ---------------------------
if (!loading && queryData){
let allDrivers = [...queryData.driverGetDriversFromDsp.drivers]
return (
<View>
<Banner />
<View>
</View>
<ScrollView contentContainerStyle={ContactStyles.container}>
{renderRoster(allDrivers)}
</ScrollView>
</View>
)
}
else{
return(
<Loading />
)
}
}
export default Contacts
问题似乎源于 determineAddOrRemove。就在该函数中每个可能的 return 值之前，uuid 正确显示，如记录的语句所示...
941904b3-77c4-46a4-8cd3-c3d2efbb8459
dd87ed5d-77ed-4ce4-97f4-9e8eca228ce2
31f5922e-8aa8-4ffa-adb4-a4e901b43d3d
add7e664-ec9d-4c51-8e4e-6961e8457b07
713d0da3-9ca5-407c-be1b-fce8bc71d974
03e5e931-154b-44a1-a59c-da5d0de89faa
74ce9746-1998-44f8-9699-3206f2345c88
9e775542-c102-4f66-a597-6d6e53a4587e
0d8d604a-e0bc-4f83-b358-fd6a2fd105a3
cb7cc30e-dda7-41f3-bbb2-641356c55216
f8155be1-f183-4ad2-ba43-2e0b0996ac83
530e363a-564d-4b0a-b1bc-e6eb0ab9554b
aa4fa720-99f1-4ed4-a4a3-7eb57f4eaa6b
b931215d-c59d-4774-8ffe-0ef12ef37532
e4537807-1dda-487a-aecd-ac8afcca6397
ac403235-e207-4452-a09a-6fa9fc6994a5
eaa21ab3-d006-45b0-92fb-bc056c2ec3fb
da2375a9-b014-4dbe-aecd-b946be3b1ad6
fa367846-1d91-4bcf-9288-de96e53e27f9
3ee9f03c-a924-4913-8af0-c9c84fb061f0
721d68c4-a412-4e9b-bea7-a6dddfd96934
a6a7430a-0601-4fb3-b474-6d7e9238c455
ea89422b-190b-4ff8-8e3e-9389c32436a5
7d4b7374-f19f-429d-af0a-e0d5f1c57f24
6961fbeb-4786-4945-98bf-5f49e9e82579
52817972-cfdc-4da1-9c98-a1f0583c49e0
12f2b73d-a9a7-455d-8c2a-db79b5236f3e
9a507278-726a-4e56-9f83-e3eceaa19cfc
46290353-8d4f-4e51-b419-4d78a7f5431c
93ed3e6e-3e60-4c8d-8890-72e27586ce26
6a8d1fc3-68fb-4f80-b92f-701312ec9ad1
248ffde5-edf6-4ed9-9016-d41e16ce09bc
c1f89d3b-ad3c-4118-be5a-73e1317bce8c
e996244a-4b78-46a2-8985-50692c467eec
00308aec-57c0-4f33-98dc-cfd21446cc62
34d3d2c1-a23e-41f2-b0a9-2cabbd4d80bc
495763ef-6ea3-45bb-836a-b75d49a77dca
c445c512-44d8-4004-90fb-9ae41802eda9
18125066-09c9-42f2-acb2-82143c890ad0
3f5ac05d-f111-4ca2-8512-1a802d85d3a9
f36626f9-2cd0-4b7a-b413-09183f4eaa4c
9ffc4980-04d8-4c53-bbdb-3b0615e6a757
2f4917f9-f523-4834-9c58-86c76f2fd462
ccf79ee2-eec7-47b5-853c-3179c0f2df62
55c6d2a0-77ea-4330-88ca-7f1b49a0e891
2c178386-23af-4c35-aa25-d65d4b3237f4
6544ca09-5448-4668-ad8d-2c30d15a7bdb
9ef8ebfc-a850-492e-a717-64340360709f
8ef3b528-e0f3-4058-8410-2bb77eacf322
7d3a4ae7-7d03-4472-b75b-73497e099e3c
c337eb3f-ca38-4932-a530-d9c7edc33619
e5a9cb7f-408b-4dd2-99d4-bc4e17a7a557
cc5f3f92-0854-4a3d-974c-d73ace24b30a
a98feda1-9a33-484e-9cce-b25fdc9765bd
2f290674-be2a-4871-8128-19e5e29341d6
302d07b1-6631-43a2-89f8-78940b794759
d2e745c1-e24c-4b25-a2de-dd73b8de5948
27bf0afd-98ec-45c9-bc94-5393aed6d05e
c0eb9270-74ae-4979-997d-242bf76d288a
6a5a1fb9-b449-49ee-ad0b-d481dbf4d2b9
10309a26-2f7a-4bcc-9214-f16fd6abb418
6113e684-6aa0-4614-8899-9d8740148e29
838875fd-f5ed-4f43-a150-589ad31bc889
a3e088e4-88ad-40c1-acf5-b4f953c80275
b5423188-b5cb-40f7-8e4b-6c69d56fd5bd
但每次我单击 Add 或 Remove 并触发 handleAddClick 或 handleRemoveClick 然后触发其中的 console.log 语句时，一旦清理 uuid 将 return 这个...
Class {
"_dispatchInstances": FiberNode {
"tag": 5,
"key": null,
"type": "RCTView",
},
"_dispatchListeners": [Function onResponderRelease],
"_targetInst": FiberNode {
"tag": 5,
"key": null,
"type": "RCTView",
},
"bubbles": undefined,
"cancelable": undefined,
"currentTarget": ReactNativeFiberHostComponent {
"_children": Array [
ReactNativeFiberHostComponent {
"_children": Array [
ReactNativeFiberHostComponent {
"_children": Array [
3925,
],
"_internalFiberInstanceHandleDEV": FiberNode {
"tag": 5,
"key": null,
"type": "RCTText",
},
"_nativeTag": 3927,
"viewConfig": Object {
"directEventTypes": Object {
"topInlineViewLayout": Object {
"registrationName": "onInlineViewLayout",
},
"topTextLayout": Object {
"registrationName": "onTextLayout",
},
},
"uiViewClassName": "RCTText",
"validAttributes": Object {
"accessibilityActions": true,
"accessibilityHint": true,
"accessibilityLabel": true,
"accessibilityLiveRegion": true,
"accessibilityRole": true,
"accessibilityState": true,
"accessibilityValue": true,
"accessible": true,
"adjustsFontSizeToFit": true,
"allowFontScaling": true,
"collapsable": true,
"dataDetectorType": true,
"disabled": true,
"ellipsizeMode": true,
"importantForAccessibility": true,
"isHighlighted": true,
"maxFontSizeMultiplier": true,
"minimumFontScale": true,
"nativeID": true,
"needsOffscreenAlphaCompositing": true,
"numberOfLines": true,
"onAccessibilityAction": true,
"onAccessibilityEscape": true,
"onAccessibilityTap": true,
"onInlineViewLayout": true,
"onLayout": true,
"onMagicTap": true,
"onTextLayout": true,
"pointerEvents": true,
"renderToHardwareTextureAndroid": true,
"selectable": true,
"selectionColor": true,
"shouldRasterizeIOS": true,
"style": Object {
"alignContent": true,
"alignItems": true,
"alignSelf": true,
"aspectRatio": true,
"backfaceVisibility": true,
"backgroundColor": Object {
"process": [Function processColor],
},
"borderBottomColor": Object {
"process": [Function processColor],
},
"borderBottomEndRadius": true,
"borderBottomLeftRadius": true,
"borderBottomRightRadius": true,
"borderBottomStartRadius": true,
"borderBottomWidth": true,
"borderColor": Object {
"process": [Function processColor],
},
"borderEndColor": Object {
"process": [Function processColor],
},
"borderEndWidth": true,
"borderLeftColor": Object {
"process": [Function processColor],
},
"borderLeftWidth": true,
"borderRadius": true,
"borderRightColor": Object {
"process": [Function processColor],
},
"borderRightWidth": true,
"borderStartColor": Object {
"process": [Function processColor],
},
"borderStartWidth": true,
"borderStyle": true,
"borderTopColor": Object {
"process": [Function processColor],
},
"borderTopEndRadius": true,
"borderTopLeftRadius": true,
"borderTopRightRadius": true,
"borderTopStartRadius": true,
"borderTopWidth": true,
"borderWidth": true,
"bottom": true,
"color": Object {
"process": [Function processColor],
},
"decomposedMatrix": true,
"direction": true,
"display": true,
"elevation": true,
"end": true,
"flex": true,
"flexBasis": true,
"flexDirection": true,
"flexGrow": true,
"flexShrink": true,
"flexWrap": true,
"fontFamily": Object {
"process": [Function processFontFamily],
},
"fontSize": true,
"fontStyle": true,
"fontVariant": true,
"fontWeight": true,
"height": true,
"includeFontPadding": true,
"justifyContent": true,
"left": true,
"letterSpacing": true,
"lineHeight": true,
"margin": true,
"marginBottom": true,
"marginEnd": true,
"marginHorizontal": true,
"marginLeft": true,
"marginRight": true,
"marginStart": true,
"marginTop": true,
"marginVertical": true,
"maxHeight": true,
"maxWidth": true,
"minHeight": true,
"minWidth": true,
"opacity": true,
"overflow": true,
"overlayColor": Object {
"process": [Function processColor],
},
"padding": true,
"paddingBottom": true,
"paddingEnd": true,
"paddingHorizontal": true,
"paddingLeft": true,
"paddingRight": true,
"paddingStart": true,
"paddingTop": true,
"paddingVertical": true,
"position": true,
"resizeMode": true,
"right": true,
"rotation": true,
"scaleX": true,
"scaleY": true,
"shadowColor": Object {
"process": [Function processColor],
},
"shadowOffset": Object {
"diff": [Function sizesDiffer],
},
"shadowOpacity": true,
"shadowRadius": true,
"start": true,
"textAlign": true,
"textAlignVertical": true,
"textDecorationColor": Object {
"process": [Function processColor],
},
"textDecorationLine": true,
"textDecorationStyle": true,
"textShadowColor": Object {
"process": [Function processColor],
},
"textShadowOffset": true,
"textShadowRadius": true,
"textTransform": true,
"tintColor": Object {
"process": [Function processColor],
},
"top": true,
"transform": Object {
"process": [Function processTransform],
},
"transformMatrix": true,
"translateX": true,
"translateY": true,
"width": true,
"writingDirection": true,
"zIndex": true,
},
"testID": true,
"textBreakStrategy": true,
},
},
},
],
"_internalFiberInstanceHandleDEV": FiberNode {
"tag": 5,
"key": null,
"type": "RCTView",
},
"_nativeTag": 3929,
"viewConfig": Object {
"Commands": Object {},
"bubblingEventTypes": Object {
"topAssetDidLoad": Object {
"phasedRegistrationNames": Object {
"bubbled": "onAssetDidLoad",
"captured": "onAssetDidLoadCapture",
},
},
"topBlur": Object {
"phasedRegistrationNames": Object {
"bubbled": "onBlur",
"captured": "onBlurCapture",
},
},
"topChange": Object {
"phasedRegistrationNames": Object {
"bubbled": "onChange",
"captured": "onChangeCapture",
},
},
"topEndEditing": Object {
"phasedRegistrationNames": Object {
"bubbled": "onEndEditing",
"captured": "onEndEditingCapture",
},
},
"topFocus": Object {
"phasedRegistrationNames": Object {
"bubbled": "onFocus",
"captured": "onFocusCapture",
},
},
"topKeyPress": Object {
"phasedRegistrationNames": Object {
"bubbled": "onKeyPress",
"captured": "onKeyPressCapture",
},
},
"topPress": Object {
"phasedRegistrationNames": O...(truncated to the first 10000 characters)
我试过更改变量的名称，但没有。当我将一个静态值放入函数中时（例如将 handleAddClick(selectedId) 更改为 handleAddClick("1234") 它将打印我期望的内容，在本例中为 1234 但是我放入的任何变量都会立即更改其值我刚刚在上面展示的那个大混乱。过去有没有人经历过这样的事情and/or对如何解决这个问题有什么想法？
Touchable传入onPress函数的参数是一个GestureResponderEvent。您正在将其重命名为 selectedId，然后将其添加到您的列表中。
onPress={(selectedId) => handleAddClick(selectedId)
你的意思可能是 onPress={() => handleAddClick(selectedId)，但你没有显示 selectedId 的来源，所以我不能肯定地说。