UseEffect .map не является функцией React Hooks
Вот моя проблема: я устанавливаю состояние currentUser, иногда неопределенное, иногда нет (из API). Затем я передаю его второму useEffect, я устанавливаю состояние оператора связи, а затем, когда я пытаюсь получить пользователей от этого оператора связи на основе идентификатора,CARSER.ID по какой-то причине кажется неопределенным.
Что я здесь делаю неправильно?
Я использую этот useEffect для наблюдения за любыми изменениями текущего пользователя, вошедшего в систему. Я передаю пользователя из службы аутентификации в состояние currentUser.
useEffect(() => {
const user = AuthService.getCurrentUser();
// console.info(user);
if (user) {
setCurrentUser(user);
// console.info(currentUser);
} else {
console.info("user not logged");
}
}, []);
Я пытаюсь передать идентификатор от currentUser в конечную точку выборки для useEffect ниже, чтобы получить носитель, к которому подключен пользователь/руководитель.
// Fetches the carrier that the user is supervisor in
const [carrier, setCarrier] = useState({
});
useEffect(() => {
fetch(`http://localhost:8080/supervisor/${currentUser.id}/carriers`, {
headers: new Headers({
'Authorization': 'Bearer ' + currentUser.accessToken,
}),
})
.then(response => response.json())
.then(json => setCarrier(json))
}, [carrier])
const [employees, setEmployees] = useState([
])
Затем я передаю оператору.id конечной точке, чтобы получить пользователей, подключенных к конкретному оператору связи, в котором находится пользователь.
// fetches the users from the specific carrier
useEffect(() => {
fetch(`http://localhost:8080/supervisor/carriers/${carrier.id}/employees/`, {
headers: new Headers({
'Authorization': 'Bearer ' + currentUser.accessToken,
}),
})
.then(response => response.json())
.then(json => setEmployees(json))
}, [employees])
{employees.length > 0 && employees.map((employeeCarrier) => (
<Slide direction = "up" in = {employees} mountOnEnter unmountOnExit>
<TableRow key = {employeeCarrier.id}>
<TableCell>{employeeCarrier.fullname}</TableCell>
<TableCell>{employeeCarrier.email}</TableCell>
<TableCell>{employeeCarrier.crn}</TableCell>
<TableCell>{employeeCarrier.role}</TableCell>
<TableCell>{employeeCarrier.address}</TableCell>
<TableCell>{employeeCarrier.birthday}</TableCell>
<TableCell align = "center">
<Tooltip title = "Modify">
{/* <IconButton aria-label = "modify" size = "small" onClick = {() => handleClickOpenEditUser(user)}> */}
<EditIcon />
{/* </IconButton> */}
</Tooltip>
<Tooltip title = "Delete">
{/* <IconButton aria-label = "delete" onClick = {()=>deleteUser(user.id)}> */}
<DeleteIcon />
{/* </IconButton> */}
</Tooltip>
</TableCell>
</TableRow>
</Slide>
))}
Я добавил остальную часть кода, мои извинения.
Поскольку второй эффект зависит от идентификатора оператора связи, я думаю, вам нужно справиться с тем, что он не определен, а также добавить его в качестве зависимости. Итак, во втором useEffect, прежде чем делать этот запрос, убедитесь, что идентификатор оператора определен: if (!!!carrier.id) return;, а затем в зависимости эффекта добавьте перевозчика: [carrier, employees]. Таким образом, он не будет выполнять запрос API, если идентификатор оператора не определен, а затем, когда оператор выбран и установлен в состояние, он выполнит этот запрос.
Ответы 1
Думаю, я понимаю ваш вопрос. Ваша иерархия выглядит примерно так:
- Посмотрите, аутентифицирован ли пользователь.
- Если аутентифицировано, извлеките носителей для пользователей.
- Если перевозчики, приведите сотрудников для перевозчика.
Итак, во-первых, как упомянул @Jayce444, ваш useEffect() проблематичен, потому что он отслеживает перевозчика, а также извлекает перевозчика.
То, что вы на самом деле хотите, это:
useEffect(() => {
const user = AuthService.getCurrentUser();
// console.info(user);
if (user) {
setCurrentUser(user);
// console.info(currentUser);
} else {
console.info("user not logged");
}
}, []);
useEffect(() => {
fetch(`http://localhost:8080/supervisor/${currentUser.id}/carriers`, {
headers: new Headers({
'Authorization': 'Bearer ' + currentUser.accessToken,
}),
})
.then(response => response.json())
.then(json => setCarrier(json))
}, [currentUser]); //Should be currentUser not carrier
Вы понимаете, почему? Только при изменении currentUser мы хотим получить перевозчика.
Расширение той же концепции:
useEffect( () => {
fetch(`http://localhost:8080/supervisor/carriers/${carrier.id}/employees/`, {
headers: new Headers({
'Authorization': 'Bearer ' + currentUser.accessToken,
}),
})
.then(response => response.json())
.then(json => setEmployees(json))
}, [carrier])
Привлекайте новых сотрудников только при смене оператора.
Имеет ли это смысл? UseEffect в основном говорит: если эта переменная/зависимость изменится, что мне делать?
Прохладный. Рад был помочь.
Этот код сбивает с толку. Похоже, что первый
usEffectвызовет бесконечный цикл, потому что он выполняет вызов API, который устанавливает носитель в своем обратном вызове, однако носитель является зависимостью эффекта, поэтому его установка вызовет повторный запуск эффекта. Во-вторых, ваш второйuseEffectне имеет ничего общего с перевозчиком, и, учитывая, что носитель изначально является пустым объектом, когда этот эффект работает на маунте, тогда да,carrier.idбудет неопределенным. В-третьих, заголовок вашего вопроса касается ошибки карты, но в вашем коде нет карты.