状态更新后不会在 React 组件中重新渲染

时间:2021-06-17 22:39:22

标签: javascript reactjs react-native

我有一个渲染项,它为每个对象列出一行,并使用 TouchableOpacity 的 onPress 方法调用函数并更新状态:

  const renderItem = ({ item }) => (
    <View style={styles.listItem}>
      <Text style={styles.studentName}>{item.name}</Text>
      <View style={styles.statusSection}>
        <Text style={styles.loginDate}>Last Logged: {new Date(item.loginDate).toLocaleTimeString()}</Text>
        <TouchableOpacity onPress={() => updateStudent(item, selectedTab)}>
          <Icon
            name={displayIconName(item.status)}
            type={item.status === 3 ? "entypo" : "font-awesome"}
            size={30}
            color={item.status === 3 ? "red" : item.status === 1 ? "green" : "gold"}
          />
        </TouchableOpacity>
      </View>
    </View>
  );

调用时,状态会正确更新,但 UI 不会重新呈现。当点击其他元素时,UI 会更新到正确的状态,这是应该的,但这里的问题是当状态立即更新时它不会重新呈现:

  function updateStudent(item, tab) {
    let currentStudents = students;
    let studentToUpdate = item;

    const idx = currentStudents.findIndex((value) => {
      return value.uid === item.uid;
    });

    if (studentToUpdate.status === 4) {
      studentToUpdate.status = 0
    } else {
      studentToUpdate.status++
    }

    currentStudents[idx] = studentToUpdate
    currentStudents.sort((a, b) => { return a.status - b.status })

    console.log(currentStudents === students) // -> Evaluates to True
    setStudents(currentStudents)
  }

这里发生了什么,应该如何修复?

0 个答案:

没有答案