React Hook“useState”在过滤后无法设置数组的完整值

Question

我正在尝试将过滤后的数组值设置为useState的默认值，示例代码如下：

var { studentList } = useContext(StudentListContext);
var selectedWarningStudents = flattenScoreList(studentList).filter((item) => {
    return selected.includes(item._id);
});

debugger

var [mailList, setMailList] = useState(selectedWarningStudents);
console.log('mailList', mailList);

这是设置调试器后打印的内容，如您所见，数组“studentList”有 91 个项目，数组“selectedWarningStudents”有 3 个项目与数组“selected”中的 3 个项目匹配。所以这里没有什么出乎意料的

在获得数组“selectedWarningStudents”后，我想在下面设置的 useState 中将其值设置为默认值

但是当我登录控制台时，它返回一个仅包含数组“selectedWarningStudents”中的第一项的数组，这里：

感谢您花时间帮助我，祝您有美好的一天

Answer 1

您很可能通过异步方式获取studentList 数据。因此，由于您要设置状态而不是使用派生状态，因此您的状态无法赶上。不过，在这种情况下，我希望根本看不到任何数据，但您可以试试这个：

const [mailList, setMailList] = React.useState([]);

React.useEffect(() => {
  var selectedWarningStudents = flattenScoreList(studentList).filter((item) => {
    return selected.includes(item._id);
  });
  setMailList(selectedWarningStudents);
}, [studentList, flattenScoreList, selected]);

但是，您可以导出数据并使用它，而不是这样做，也许使用React.useMemo

const selectedWarningStudents = React.useMemo(
  () =>
    flattenScoreList(studentList).filter((item) => {
      return selected.includes(item._id);
    }),
  [studentList, flattenScoreList, selected]
);

在这种情况下，您没有任何mailList 状态，因为您是从上下文数据派生数据。

顺便说一句，我不知道flattenSocreList 和selected 是从哪里来的，无论如何我都将它们添加到了依赖数组中。根据您的需要进行更改。

这是一个工作示例。如您所见，Students 组件中没有状态，您不需要它。您可以按原样使用studentList，也可以对其进行过滤并使用此过滤后的数据。

const StudentContext = React.createContext();

const studentData = [
  { id: 1, name: "foo", dep: "aaa" },
  { id: 2, name: "bar", dep: "bbb" },
  { id: 3, name: "baz", dep: "ccc" },
  { id: 4, name: "fizz", dep: "aaa" },
  { id: 5, name: "buzz", dep: "ddd" },
];

function studentApi() {
  return new Promise((resolve) => setTimeout(() => resolve(studentData), 1000));
}

function App() {
  const [studentList, setStudentList] = React.useState([]);

  React.useEffect(() => {
    studentApi().then(setStudentList);
  }, []);

  return (
    <StudentContext.Provider value={studentList}>
      <div className="App">
        <Students />
      </div>
    </StudentContext.Provider>
  );
}

function Students() {
  const studentList = React.useContext(StudentContext);
  const filteredStudents = React.useMemo(
    () => studentList.filter((student) => student.dep === "aaa"),
    [studentList]
  );

  return (
    <div>
      {filteredStudents.map((student) => (
        <div key={student.id}>{student.name} at {student.dep}</div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="root" />