react-native - 状态变量数组中的值为 boolean true 但是当迭代 state 变量的每个元素时，该值为 boolean false

Question

我使用上下文来托管可以由组件共享的全局状态变量。

我的上下文是这样的：

const MyContext = React.createContext();

export const MyProvider = ({children}) => {

// declare the state variable in my context, students is an array of student object
const [students, setStudents] = useState([]);

  return (
    <MyContext.Provider
      value={{
        students,
        setStudents,
      }}>
      {children}
    </MyContext.Provider>
  );
}

上面声明的状态钩子宿主students变量&setStudents函数。实践中的每个student对象和students数组如下所示（注意每个学生都有一个布尔字段graduated）：

[
{id: 123, name: 'John', graduated: false},
{id: 456, name: 'Bob', graduated: false},
...
]

（是的，当然，我将我的应用程序包装在上下文的提供程序中。这不是我的问题的重点，所以我没有展示它，但你知道。）

所以，现在students&setStudents对我的应用程序的组件和屏幕全局可用。

这是我向学生展示的屏幕，当用户点击屏幕上的一名学生时，该学生将更新为graduated: true：

import React, {useContext} from 'react';
import MyContext from '../context/MyContext';

const MyScreen = ()=> {
  // use context 
  const {students, setStudents} = useContext(MyContext);

  // I only need to run the code once to initialize my state variable so I wrap it inside the useEffect() hook like this
  useEffect(()=>{
    const initialStudents = parseBackendData();
    setStudents(initialStudents);
  }, []);

  // this function is called by the onPress of following layout component
  const onStudentPressed = (student) => {
    // the selected student is set to graduate: true & new array is returned
    const updatedStudents = updateStudentToGraduate(
      students,
      student,
    );
    // call the hook function
    setStudents(updatedStudents);
  };

  return (
    <View style={styles.main}>
        {students.map((student) => {
         
          return (
            <MyRow
              key={student.id}
              onPress={onStudentPressed}
            />
          );
        })}
      </View>
  )

}

当我运行它时，我点击一个学生，MyScreen 由于状态变化而重新渲染。graduate: true然后我注意到我点击的学生在将其登录到钩子时已更新为useEffect，但在迭代时的布局代码中students.map(...)，该学生仍然持有graduated: false。为什么？如何使用学生的正确状态让布局渲染部分？

标签： react-nativereact-hooks