Обновление состояния реакции при получении массива объектов

#javascript #arrays #reactjs

#javascript #массивы #reactjs

Вопрос:

Я использую axios.get для вызова моего MongoDB. Мой ответ от БД представляет собой массив объектов, содержащий все данные из базы данных. Я только пытаюсь сохранить имя пользователя каждого пользователя в состояние. Я пытаюсь установить ответ (res.data.username) в мое состояние, однако, когда я регистрирую свое состояние, я получаю пустой массив обратно. PS: Не было способа скопировать мой ответ, поэтому я добавил изображение ответа для справки, дайте мне знать, если есть лучший способ показать ответ

 const [users, setUsers] = useState([]);
useEffect(() => {
    axios.get('http://localhost:5000/users')
    .then(res => {
        if (res.data.length > 0) {
            console.log(res.data)
            setUsers(user => [...user, res.data.username]);
        }
    })
    
}, [])

Ответ №1:

Поскольку users это массив, передайте массив в setUsers . Используйте деструктурирование для удобства чтения и упрощения.

 const [users, setUsers] = useState([]);
useEffect(() => {
  axios.get("http://localhost:5000/users").then((res) => {
    if (res.data.length > 0) {
      console.log(res.data);
      setUsers(res.data.map(({ username }) => username));
    }
  });
}, []);

Ответ №2:

res.data — это массив. чтобы просто установить имя пользователя из ответа, вы можете попробовать

 setUsers(user => [...user, res.data.map(response => response.username)]);

Ответ №3:

 setUsers(res.data.map(({ username }) => username));