小编sla*_*mer的帖子

我有一个SearchBar和Profile组件，我想向服务器发出GET请求：http://awesomeserver/users。服务器中的数据位于对象数组中。我希望能够在搜索栏中输入用户名，当我单击“搜索”时，我想在页面上显示该用户的名字，姓氏和电子邮件。例如，当我搜索jsmith时，我要显示：名字：John，姓氏：Smith，电子邮件：jsmith@gmail.com。为了做到这一点，我需要将它们传递props给Profile组件。我正在使用axios发出请求，但是我想我没有正确使用它。如何按用户名搜索，但仅检索名字，姓氏和电子邮件？

这是服务器中示例数据的样子：

{
  username: jsmith,
  firstName: John,
  lastName: Smith,
  email: jsmith@gmail.com,
  hobby: hiking,
  id: 1
}

到目前为止，这是我的代码：

//Profile Component

import React, { Component } from 'react';


class Profile extends Component {
  render() {
    return (
        <div>
            <div>First Name: {this.props.firstName}</div>
            <div>Last Name: {this.props.lastName}</div>
            <div>Email: {this.props.email}</div>
        </div>
    );
  }
}

export default Profile;



//SearchBar component

import React, { Component } from 'react';
import axios from 'axios';

import Profile from './Profile';

class SearchBar …

当我输入一个不存在的 url 时，我试图呈现一个组件。但是，该组件会在所有路由中保持渲染。我正在使用react-router-dom@4.1.1. 这是我设置的路线：

import * as React from "react";
import { Route, RouteComponentProps } from "react-router-dom";
import glamorous from "glamorous";
import ElementList from "./elementlist";
import AddElement from "./addelement";
import NotFound from "./NotFound";

const Styling = glamorous.div({
  minHeight: 5,
  minWidth: 8
});

const NavRouter = () => (
  <Styling>
    <Route path="/" exact={true} component={ElementList} />
    <Route path="/addelement" component={(props: 
       RouteComponentProps<{}>) => (
         <AddElement onSubmitSuccess={() => props.history.push("/")} />
       )} />
    <Route path="*" exact={true} component={NotFound}/>
  </Styling>
);

export default NavRouter;

这是我的NotFound …