Блог

я пытаюсь установить значение массива после фильтрации в качестве значения 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 элемента, совпадающих с 3 элементами в массиве «selected». Так что здесь нет ничего неожиданного

после получения массива «selectedWarningStudents» я хочу установить его значение в качестве значения по умолчанию в useState, которое я установил ниже

но когда я захожу в консоль, он возвращает массив, содержащий только первый элемент из массива «selectedWarningStudents», здесь:

спасибо, что нашли время, чтобы помочь мне, хорошего дня

Скорее всего, вы получаете 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" />