Ошибка в хуке useEffect

Question

export default function AccountPage() {
  const {token, logout} = useAuth()
  const isAuth = !!token;
  const dispatch = useDispatch()
  const user = useSelector(getUser)
  const [ads, setAds ] = useState([])

  useEffect( () => {
     dispatch(fetchUser())
  }, [])


  // обьявления
  useEffect(()  => {
    user.ads && user.ads.map(async ad => {
      await axios.get(`${config.serverUrl}/api/ads/${ad}`)
       .then(res => setAds([...ads,res.data]))
    })
  }, [user])

  if (isAuth) {
    return (
      <Container>
      <Grid columns={2}>
        <Grid.Column>
          <Header as='h2'>Вы авторизованы</Header>
          <Button onClick={() => logout()}>Выйти</Button>
          <Header as='h2'>Имя: {user.name}</Header>
          <Header as='h2'>Фамилия: {user.surname}</Header>
          <Header as='h2'>Почта: {user.email}</Header>
        </Grid.Column>
        <Grid.Column>
          <Header>Объявления:</Header>
          <AdvertList advertArr={ads}></AdvertList>
        </Grid.Column>
      </Grid>
       
      </Container>
    )
  }

  return (
    <div className='container'>
      <Header>
        <Header as='h2'>Войдите или зарегистрируйтесь </Header>
        <NavLink to='/home'>На главную</NavLink>
      </Header>
      <Switch>
        <Route path='/account' exact>
          <Link to='/auth'><Button>Войти</Button></Link>
          <Link to='/registration'><Button>Зарегистрироваться</Button></Link>
        </Route>
      </Switch>
    </div>
  )
}

user: {
      ads: [
        '5fe9aac4649a500f644861bc',
        '5fe9cbc546e98821185cce24',
        '5fe9ce4dafb04903083ea9ee',
        '5fe9cfac92f9cb2598a76209'
      ],
      _id: '5fe99d41a63b4c0648582080',
      name: 'Игорь',
      email: '[email protected]',
      surname: 'Сахно',
      password: '$2b$10$fJNcbVOj4NxpO3RJNPkOseyhxdbZAkK5S6yKcmtuH2/4wDG75A1Lq',
      __v: 0
    }

Не могу понять почему не сохраняет данные при запросе на сервер.

  const user = useSelector(getUser)
  const [ads, setAds ] = useState([])
  
// обьявления
  useEffect(()  => {
    user.ads && user.ads.map(ad => {
      axios.get(`${config.serverUrl}/api/ads/${ad}`)
       .then(res => setAds([...ads, res.data]))    // скорее всего тут не правильно
    })
  }, [user])

Может посоветуйте другое решение. Нужно по ads.id дать запрос на сервер

Answer 1

Этот пример можно запустить тут

Вместо рекламы взят список дел - дело это не меняет

Основная задача прокоментирована в коде.

(я бы задумался об изменении API чтобы получать нужные данные за раз, если есть возможность изменить его)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

    <script type="text/babel">
        const List =() => {
           const [ads, setAds ] = React.useState([])
           const [user, setUser ] = React.useState({
              ads: [
                '1',
                '2',
                '3',
                '4'
              ],
              _id: '5fe99d41a63b4c0648582080',
              name: 'Игорь',
              email: '[email protected]',
              surname: 'Сахно',
              password: '$2b$10$fJNcbVOj4NxpO3RJNPkOseyhxdbZAkK5S6yKcmtuH2/4wDG75A1Lq',
              __v: 0
          })
    
        React.useEffect(()  => {
          if (user.ads) {
             // создаем массив промисов
             const all = user.ads.map((ad) => axios.get(`https://jsonplaceholder.typicode.com/posts/${ad}`));
             // обрабатываем все промисы
             const result = Promise.all(all);
             // извлекаем data и записывам за один раз весь масив в ads
             result.then (e =>  setAds( e.map(undata => undata.data)))
          }
        }, [user])

        return (
          <ul>
          {
            ads && ads.map( e => (
              <li key={e.id}>{e.title}</li>
            ))
          }
          </ul>
        )  
      }

      const App = () => {
        return (
            <List />
        );
      };

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

БЛОГ НА HUSL

Ошибка в хуке useEffect

Ответы (1 шт):