React Native更新JSON对象数组

Question

我有一个useState变量，它有一个JSON对象数组，我试图让文本字段动态渲染和更新与onChangeText，但我有一点这个问题。

当我将console.log(index)添加到updateHashtags时，它说它是未定义的，我无法理解我做错了什么或可以做些什么来完成这项工作。理论上，索引应该是每个文本字段的静态数字。因此，第一个文本字段将以hashtags[0]作为其值，并使用'0'作为更新hashtags状态的索引。

当我使用:console.log('index',index);在updateHashtags中，我得到:index undefined

代码如下:

const updateHashtags = (text, index) => {
let ht = hashtags;
ht[index].name = text;
setHashtags(ht);
}
const hashtagElement = (
<>
<Text style={styles.plainText} >Set Your Values:</Text>
<Text style={styles.instructionsText} >This is what other users use to search for you.</Text>
{hashtags.map((e,index) => 
<TextInput 
placeholder='value'
key={e.name + index}
value={hashtags[index].name}
onChangeText={(text,index) => updateHashtags(text,index)}
style={styles.textInput}  
/>
)}
<TouchableOpacity 
onPress={() => {
let ht = hashtags;
let newht = {
name: '',
weight: 0,
};
ht[ht.length] = newht;
setHashtags(ht);
}}
>
<Ionicons 
name="add-circle-outline"
size={40}
color={'black'}
/>
</TouchableOpacity>
</>
);

Answer 1

可能onChangeText函数没有得到索引参数。

试着这样写:

// we are getting index from here
{hashtags.map((e,index) => 
<TextInput 
placeholder='value'
key={e.name + index}
value={hashtags[index].name}
// so no need of taking index from param here
onChangeText={(text) => updateHashtags(text,index)}
style={styles.textInput}  
/>
)}

对于你的updateHashTags函数也可以考虑这样:

const updateHashtags = (text, index) => {
// doing it this way ensures your are editing updated version of state
setHashtags((state) => {
let ht = state;
ht[index].name = text;
return ht;
});
}