Получить запрос ax ios React js useEffect не работает (Не удается найти модуль './undefined') - PullRequest
Новая
       5

Получить запрос ax ios React js useEffect не работает (Не удается найти модуль './undefined')

0 голосов
/ 15 апреля 2020

Я создаю фиктивную социальную сеть, и я застрял в проблеме, которую я не до конца sh, чтобы понять. Вот разные результаты и код, который я реализую.

Ошибка: 

Error: Cannot find module './undefined'
▼ 2 stack frames were expanded.
webpackContextResolve
C:/Users/sanjs/desktop/demo-react/src/assets sync /^/.*$:18
webpackContext
C:/Users/sanjs/desktop/demo-react/src/assets sync /^/.*$:13
▲ 2 stack frames were expanded.
Profile
C:/Users/sanjs/desktop/demo-react/src/components/ProfileSection/Profile.js:16
  13 | <div className='profile--image'>
  14 |     <Image 
  15 |        alt={`imagen de ${profile.title}`}
> 16 |        imgSrc={require(`../../assets/${profile.imagen}`)}
     | ^  17 |     />
  18 |   
  19 | </div>

Компонент Profile: получает реквизиты профиля как объект для отображения 

                     <div className='content--content'>

                        <div className='profile--image'>
                            <Image 
                               alt={`imagen de ${profile.title}`}
                               imgSrc={require(`../../assets/${profile.imagen}`)} <-- 

                               //if I delete this above line of code the error does not appear
                               //the data is displayed normally except the image of course 

                            />

                        </div>

                        ...

                    </div>

Затем в ProfileDetail я запрашиваю данные и реализую Компонент профиля: 

 const ProfileDetail = ({
     match
    }) => {

    const [ data, setData ] = useState({})

    useEffect(() => {
        async function getProfiles(){
           const result = await axios(
            `http://localhost:8001/api/profiles/${match.params.id}`,
           );
           setData(result.data);

        }
        getProfiles()
     }, [match]);

      console.log(data) // --> this logs an empty object {} the initial state. 
    return (
        <div className='profileDetail--container'>

                   <Profile 
                       profile={data} 
                   />

                    ...
        </div>
    )
}

express сервер для получения профилей и профиля по идентификатору: 

const path = require('path');

const express = require('express');

const cors = require('cors');

const data = require('./data/profiles.json')

const app = express();

app.use(cors());

const port = 8001;

app.get('/api/profiles', (req, res) => {
    res.sendFile(path.join(__dirname, 'data', 'profiles.json'));
});

 app.get('/api/profiles/:id', function (req, res) {
    const profileId = Number(req.params.id)
    const getProfile = data.profiles.find((profile)=>profile.id === profileId)

    if(!getProfile){
      res.status(500).send('some error message')
    }else{
      res.json(getProfile)
    }
 })

app.listen(port, () => {
  console.log(`[profiles] API listening on port localhost:${port}/api/profiles.`);
});

В браузере это работает нормально ... http // localhost : 8001 / api / Profiles и http // localhost: 8001 / api / profile / 1 приводят данные, но с некоторыми особенностями. С первым URL данные отображаются в браузере следующим образом: 

{
  "profiles":[
       {
          "id":1,
          "name":"Rick",
          "lastName":"Sanchez",
          "tweets":["tweet1","tweet2"]
       },
        {
          "id":2,
          "name":"Morty",
          "lastName":"Smith",
          "tweets":["tweet1","tweet2"]
       },
       etc...
   ]
}

Со вторым, например, так: 

{id:1,name:"Rick",lastName:"Sanchez"}

Я могу отобразить компонент, удалив строку ниже, но без изображения профиля 

imgSrc={require(`../../assets/${profile.imagen}`)}

сначала журнал представляет собой {}, а затем дважды печатает данные профиля, как и должно быть ... в противном случае выводится сообщение об ошибке ..

Я надеюсь, что я четко объяснил проблему, если кто-нибудь знает, что происходит, пожалуйста, дайте мне знать, спасибо заранее.

1 Ответ

1 голос
/ 15 апреля 2020

Такой путь ../../assets/${profile.imagen} не существует во время выполнения, если вы используете CRA , обратитесь к тому, как добавить изображение 

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}
export default Header;

Если вы хотите сделать это динамически, используйте папку public (stati c) или импортируйте связанные изображения и используйте словарь, например: 

import logo1 from "./logo.png";
import logo2 from "./logo2.png";

const LOGO = {
  logo1: logo1,
  logo2: logo2,
};

function Header({ logoId }) {
  return <img src={LOGO[logoId]} alt="Logo" />;
}
...