Question

我使用BrowserRouter将App作为父组件，将UserInfo作为子组件使用。无法获取数据我收到错误，如我所述，我使用BrowserRouter与App作为父组件，UserInfo作为子。无法获取数据我遇到了错误，如问题所述

//这是我的index.js

t(arreglo)

// App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter, Switch, Route } from 'react-router-dom'

var UserInfo = require('./Components/UserInfo');

var routes = (
    <BrowserRouter>
        <Route path="/" component={App}>
            <Switch>
                <Route path="user/:username" component={UserInfo} />
            </Switch>
        </Route>
    </BrowserRouter>
);

ReactDOM.render(routes, document.getElementById('root'));
registerServiceWorker();

// UserInfo.js

import React, { Component } from 'react';
import './App.css';
import PropTypes from "prop-types";
import { browserHistory } from 'react-router';

var history = require('react-router').browserHistory;

class App extends Component {
  static contextTypes = {
    router: PropTypes.object
  }
  constructor(props, context) {
     super(props, context);
  }
  submitUser(event) {
    console.log(this.refs.inputUser.value);
    event.preventDefault();
    this.context.router.history.push('/user/${this.refs.inputUser.value}');
  }

  render() {
    return (
      <div>
        <nav className="uk-navbar-container uk-margin" uk-navbar="true">
          <div className="uk-navbar-left">

            <a className="uk-navbar-item uk-logo" href="/">  Github search  &nbsp;
              <span uk-icon="icon: github; ratio: 2.2" className="uk-margin-large-right"></span>
            </a>

            <div className="uk-navbar-item  uk-navbar-right">
              <form onSubmit={this.submitUser}>
                <input className="uk-input uk-form-width-medium"
                  type="text" placeholder="Github UserName...." ref="inputUser" />
                &nbsp;&nbsp;
                <button className="uk-button uk-button-primary">Search &nbsp;
                <span uk-icon="search" className="uk-margin-small-right"></span>
                </button>
              </form>
            </div>
            <div className="uk-navbar-item  uk-navbar-right"></div>
          </div>
        </nav>

        <div className="uk-container-large">
          {this.props.children}
        </div>
      </div>

    );
  }
}

export default App;

Answer 1

UserInfo组件中存在一些错误。

您尚未在构造函数中设置用户的初始状态。

然后在$ .getJSON（）中不需要另一个。你已经得到了响应，只需用响应的用户setState，你就可以了。

class UserInfo extends React.Component {
  constructor(props) {
    super(props)
     this.state={
        user : "",
      }
}    
componentDidMount() {
    this.fetchData();
}
componentDidUpdate(prevProps) {
    if (prevProps.params.username !== this.props.params.username) {
        this.fetchData();
    }
}

fetchData() {
        $.getJSON('https://api.github.com/users/subhanshu')
        .then((res) => {    
           this.setState({ user : res })
        },this);
}

render() {
    if (!this.state.user) {
        return (
            <div className="uk-child-width-1-3@s uk-grid-match">Loading......</div>
        )
    }
    var user = this.state.user;

    return (
        <div className="uk-child-width-1-3@s uk-grid-match" uk-grid>
            <Link to={`/user/${user.login}`}>
                <div className="uk-grid-small uk-flex-middle" uk-grid>
                    <div className="uk-width-auto">
                        <img className="uk-border-circle" width="60" height="60"
                            src={user.avatar_url} />>
             </div>
                    <div className="uk-width-expand">
                        <h3 className="uk-card-title uk-margin-remove-bottom">
                            {user.login} ({user.name})
                        </h3>
                        <p className="uk-text-meta uk-margin-remove-top">
                            {user.bio}
                        </p>
                    </div>
                </div>
            </Link>
        </div>
    );
}
}

Answer 2

您的<BrowserRouter>应该是，

<BrowserRouter>
  <Switch>
    <Route path="/" component={App}>
  </Switch>
</BrowserRouter>

如果App不是通用父级，并且仅用于显示UserInfo，则可以在App组件的渲染中添加，

<div className="uk-container-large">
   <Route path="user/:username" component={UserInfo} />
</div>

警告：无效道具，不应在同一路线中使用Route组件和子组件

2 个答案: