React 本机 Flatlist 项目未更新答案

【问题标题】：React native Flatlist item is not updateReact 本机 Flatlist 项目未更新
【发布时间】：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);
  };

【问题讨论】：

标签： reactjs react-native react-native-android react-native-flatlist react-native-textinput

【解决方案1】：

使用 extraData 的 FlatList 属性 extradata

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


<FlatList

extraData{subjects} // 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