React 本机 Flatlist 项目未更新

Posted 2023-05-07

【中文标题】React 本机 Flatlist 项目未更新

【英文标题】：React native Flatlist item is not update

【发布时间】：2021-11-08 04:05:30

【问题描述】：

我目前正在做一个项目，我可以在我的 Flatlist 中输入项目主题并通过添加 NewMark 和 NewGrade 来更新项目。我尝试控制台日志并输入了输入值，但它不会用输入的值更改 NewMark 和 NewGrade 值。我希望 NewMark 和 NewGrade 值会更新，但实际结果仍然是空字符串值。如何根据新输入值更改 NewMark 和 NewGrade 值？

这是在平面列表中添加主题

const addSubject = () => 
    if (subjectInput === '' || markInput === '' || gradeInput === '')
      Alert.alert('Error', 'Please input todo');
     else 
      const newSubject = 
        id: Math.random().toString(),
        Subject: subjectInput,
        Mark: markInput,
        Grade: gradeInput.toUpperCase(),
        Selected: false,
        NewMark: '',
        NewGrade: '',
      ;
      setSubjects([...subjects,newSubject]);
    
  ;

我要返回的平面列表

<FlatList
showsVerticalScrollIndicator=false
contentContainerStyle= padding: 10 , paddingBottom: 100
data=subjects
keyExtractor =  (item) => item.id.toString() 
renderItem=( item ) => <ListItem subject=item/>
/>

文本输入框更新主题项（添加newMark和newGrade）

<View style=styles.update>
        <TextInput
          style=[styles.updateInput,  borderTopLeftRadius: 10, borderBottomLeftRadius: 10, ]
          placeholder='New Mark...'
          keyboardType= "numeric"
          value=newMarkInput
          onChangeText=(text) => setNewMarkInput(text)
        />
        <TextInput
          style=[styles.updateInput,  borderBottomRightRadius: 30]
          placeholder='New Grade...'
          value=newGradeInput
          onChangeText=(text) => setNewGradeInput(text)
        />
        <TouchableOpacity style=styles.updateBtn onPress=item => updateSubject(item?.id) >
          <View >
            <Icon name="add" size=30 color="white"/>
          </View>
        </TouchableOpacity>
      </View>

这是在主题项中更新（添加newMark和newGrade）

const updateSubject = (subjectId) => 
    if (newMarkInput === '' || newGradeInput === '')
      Alert.alert('Error', 'Please fill in all boxes');
     else 
    const newSubject = subjects.map(item => 
      if (item.id === subjectId) 
        return ...item,Selected: false, NewMark: newMarkInput, NewGrade: newGradeInput;
      
      return item;
    
    );
    setSubjects(newSubject);
    console.log(newMarkInput,newGradeInput, newSubject);
  
    setNewMarkInput('');
    setNewGradeInput('');
    setShowInputBox(false);
  ;

【参考方案1】：

使用 extraData 的 FlatList 属性 extradata

extraData 监视更改并重新渲染/更新平面列表

<FlatList

extraDatasubjects // add this
showsVerticalScrollIndicator=false
contentContainerStyle= padding: 10 , paddingBottom: 100
data=subjects
keyExtractor =  (item) => item.id.toString() 
renderItem=( item ) => <ListItem subject=item/>
/>

【讨论】：

谢谢你的建议 Anwar，但我还是有同样的问题。在控制台上，我看到不仅 NewMark 和 NewGrade 没有改变，而且 Selected 也没有像预期的那样变为 false