Как исправить ошибку 'Не удается прочитать свойство' params 'из неопределенного' в Reactjs - PullRequest
Новая
       31

Как исправить ошибку 'Не удается прочитать свойство' params 'из неопределенного' в Reactjs

0 голосов
/ 04 ноября 2019

Я хочу знать, что не так с моим кодом каждый раз, когда я получаю этот MSG "Не могу прочитать свойства" params "из неопределенного" Я хочу передать реквизит со страницы на другую, я получаю мульти API и со второгоAPI Я хочу получить несколько изображений, чтобы передать его на другой вид. Первый API работает нормально в ProfileHeader.JS, но второй с ProfileTabs.JS Я столкнулся с некоторыми проблемами.

Я не уверен, где моя проблема - «извините за мой плохой английский»

Мой первый просмотр: 

ProfileLanding.JS

import React, { useState, useEffect } from 'react'
import ProfileHeader from './ProfileHeader';
import ProfileTabs from './ProfileTabs';

function ProfileLanding({ match }) {
    useEffect(() => {
        fetchUser();
        console.log(match);
    }, []);
    const [user, setUser] = useState({
        image: {}
    });
    const [usergallery, setUsergallery] = useState({
        image: {}
    });
    const fetchUser = async () => {
        let [fetchUser, fetchUsergallery] = await Promise.all([
            fetch(
                `http://arabcdb.com/backstage/login/teamapibyid/${match.params.id}`
            ),
            fetch(
                `https://arabcdb.com/backstage/login/mediateamapiid/${match.params.id}`
            )
        ]);
        const userr = await fetchUser.json();
        setUser(userr);
        const usergalleryr = await fetchUsergallery.json();
        setUsergallery(usergalleryr);
    };
    return(
               <section className="col-md-9">
                   <ProfileHeader user={user} />
                   <ProfileTabs usergallery={usergallery} />
               </section>
    )
}
export default ProfileLanding;

, и это мой второй взгляд: 

ProfileTabs.JS

import React, { Component } from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";
import './ProfileTabs.css'
class ProfileTabs extends Component{
    constructor(props) {
        super();
        this.state = { data: [] };
        console.log(props)
      }
      componentDidMount() {
         const test = this.props.match.params.id;
        fetch(`http://arabcdb.com/backstage/login/mediateamapiid/${test}`)
          .then(res => res.json())
          .then(json => this.setState({ data: json }));
      }
      render() {
        return (
                    <div>
                        <div className="gallery" id="gallery">
                       {
                           this.state.data.map(item => (
                            <div className="mb-3 pics animation all 2" key={item.id}><img className="img-fluid" src={"http://arabcdb.com/backstage/uploads/" + item.image} alt="Card cap" /></div>
                           ))
                       }
            </div>
        </div>
    );
  }
}
export default ProfileTabs;

Ошибка просмотра MSG

1 Ответ

1 голос
/ 04 ноября 2019

Это потому, что на самом деле у вас нет свойства соответствия.

В вашем файле ProfileTabs.js, поскольку вы используете компонент класса, вы должны заключить его в withRouter HOC. Или, если вы предпочитаете использовать функциональные компоненты, вы можете использовать useparams hook.

Вы также можете пропустить опору из компонента ProfileLanding.js.

Использоватьтот, который легче для вас.

...