Почему axios не отображает данные во внешнем интерфейсе с помощью useState, useEffect

#node.js #reactjs #axios

#node.js #reactjs #axios

Вопрос:

get() работает. Когда я перешел по ссылке и ввел ее вручную currAdmin = 1 , она отобразила нужные мне данные. Прямо сейчас он не будет отображаться в моем интерфейсе, когда я его вызываю. Это то, что я делал до сих пор. Моя страница панели мониторинга

 import React, { useState, useEffect, useContext } from 'react';
import UserContext from '../context/UserContext';
import { useHistory, Link } from 'react-router-dom';
import Header from "./Header"
import { ListGroup, } from 'react-bootstrap';
import axios from 'axios';
import LinkTime from './LinkTime';

function Dashboard() {
    const { userData } = useContext(UserContext);
    const history = useHistory();

    useEffect(() => {
        if (!userData.user)
            history.push("/");
    }, []);

    useEffect(() => {
        getAllLinks();
    }, []);

    const [mylinks, getLinks] = useState('');

    const getAllLinks = () => {
        let currAdmin = userData.user.adminId;
            axios.get('http://localhost:9000/Links/all?currAdmin='   currAdmin)
            .then((response) => {
                const allLinks = response.data.mylinks.allLinks;
                getLinks(allLinks);
            })
            .catch(error => console.error('Error'));
    }


    return (

        < LinkTime mylinks={mylinks} />
    );




}
 

Это мой файл LinkTime, в котором у меня есть дочерняя функция

 import React from 'react'; 

export default function LinkTime(props) {
    console.log(props.mylink);

    const displayLinks = (props) => {
        const { mylinks } = props;

        if (mylinks.length > 0) {
            return (
                mylinks.map((mylink, index) => {
                    console.log(mylink);
                    return (
                        <div className='adminId' key={mylink._id}>
                            <p className="links"> {mylink.links} </p>
                             <h1 class="ID"> {mylink.adminId} </h1>
                        </div >
                    )
                })
            )

        } else {
           return <h2> no </h2>
        }
    }

    return (

        <>
            <h3> {displayLinks(props)} </h3>

        </>
    );
}
 

На данный момент он отображает только оператор else, который является no . Что я здесь делаю не так, что данные, вызываемые с помощью axios, не принимаются? В powershell это, кажется, захватывает данные. Любые идеи помогут!

Комментарии:

1. если вы просматриваете запрос на вкладке сети инспектора вашего браузера при загрузке страницы, что возвращается в ответ http://localhost:9000/Links/all?currAdmin=....' ?

2. Я думаю, что это запрос, который вы мне там показываете — каков ответ?

3. @Yorkshireman извините, я новичок в этом, поэтому я пошел дальше и посмотрел под ответом, и он показывает это [{"_id":"5fc43233c814618b24b0ed34","links":"www.adminlink1.com","adminId":1,"createdAt":"2020-11-29T23:43:47.968Z","updatedAt":"2020-11-29T23:43:47.968Z","__v":0}] , а именно те данные, которые мне нужны, хотя я понятия не имею, почему они не отображаются.

4. Вы уверены, что к вашим данным можно получить доступ с response.data.mylinks.allLinks помощью . Тело примера ответа, которое вы нам показали, содержит только список, к которому можно получить доступ response.data только с помощью. Просто предположение. Я также не понимаю, почему вы используете такую сложную структуру программы. Не было бы лучше использовать подкомпонент для отдельных ссылок. И HTML-код в конце компонента функции LinkTime немного странный.

5. Пожалуйста. Но если бы Yorkshireman не попросил вас о выводе, у меня не было бы этой идеи. Итак, он герой. Продолжайте учиться, добивайтесь успеха, и да пребудет с вами сила. Приветствия.