Question

我在使用express从后端访问数据时遇到麻烦，对于如何设置路由我也感到困惑。当我不得不从数据库中挖掘某些东西时，是否只需要表达路线？

我的用户组件

import React from 'react';

class User extends React.Component {
    state = {
        username: ""
    }

    componentDidMount() {
        fetch("/api/:user")
            .then(res =>res.json()
            .then(data => {
                console.log("data", JSON.stringify(data, null, 4));
                this.setState({data}) 
            }))
    }

    render() {
        return (
            <div>
                {this.state.username}
            </div>
        )
    }
}

export default User;

我的用户路由，路由是/ api /：user

router.get("/:user", (req, res)=>{
    // find user
    console.log(req.params);
    User.find({username:req.params.user}, (err, foundUser)=>{
        if(err) {
            console.log(err);
        } else {
            res.json(foundUser);
        }
    });
});

当我console.log（req.params）时，它返回：user，而不是请求的实际用户

Answer 1

在您的网址中，:user是一种在后端代码中表示“值在此位置”的方式，它必须是我假定的数据库中的用户ID。

因此，在React代码中，您应该执行以下操作：

const userId = 4 // the id of the user that you want to fetch
fetch(`/api/${userId}`)

Answer 2

我正在提供示例代码供您学习。

在App.js中，我们使用react-router-dom包定义路由。

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Redirect,
  Switch,
  Link
} from "react-router-dom";
import Users from "./Users";
import User from "./User";

function App() {
  return (
    <Router>
      <Link to="/">Users</Link>
      <Switch>
        <Route path="/" exact component={Users} />
        <Route path="/:userId/" exact component={User} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}

export default App;

在“用户”组件中，我们从jsonplaceholder api中获得了一个用户列表，并列出了这些用户，并为用户组件提供了带有userId的动态链接。

import React from "react";
import { Link } from "react-router-dom";

class Users extends React.Component {
  state = {
    users: []
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return (
      <ul>
        {this.state.users.map(user => (
          <li key={user.id}>
            <Link to={`/${user.id}`}> {user.name}</Link>
          </li>
        ))}
      </ul>
    );
  }
}

export default Users;

在用户组件中，我们从this.props.match.params.userId获取userId参数，并使用该userId调用另一个api来获取用户详细信息。

import React from "react";

class User extends React.Component {
  state = {
    user: null
  };

  componentDidMount() {
    fetch(`https://jsonplaceholder.typicode.com/users/${this.props.match.params.userId}`)
      .then(res => res.json())
      .then(user => {
        this.setState({ user });
      });
  }

  render() {
    const { user } = this.state;

    if (!user) return <div>Loading user...</div>;

    return (
      <div>
        <h1>User Name: {user.name}</h1>
        <p>Email: {user.email}</p>
        <p>Website: {user.website}</p>
      </div>
    );
  }
}

export default User;

请注意，我们使用反引号template literal通过动态构造了用户详细信息api URL。这是您在代码中遇到的问题之一。

Codesandbox

如何使用React从Express后端获取数据

2 个答案: