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

问题描述

我正在使用 BrowserRouter，App 作为父组件，UserInfo 作为子组件。无法获取数据我收到了问题中提到的错误，我正在使用 BrowserRouter，App 作为父组件，UserInfo 作为子组件。无法获取数据我收到问题中提到的错误

// 这是我的 index.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();

//App.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;

//用户信息.js

import React, { Component } from 'react';
import { BrowserRouter, Link } from 'react-router-dom'

var $ = require('jquery');

class UserInfo extends Component {
    constructor(props) {
        super(props)
    }
    getInitialState() {
        return {};
    }

    componentDidMount() {
        this.fetchData();
    }
    componentDidUpdate(prevProps) {
        if (prevProps.params.username !== this.props.params.username) {
            this.fetchData();
        }
    }

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

    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>
        );
    }
}

export default UserInfo;

标签： javascriptreactjs

您在 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>
    );
}
}

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

问题描述

解决方案

推荐阅读