数据库查询返回整个列表而不是所需的查询

Question

我正在尝试在我的数据库中查询特定用户发布的所有植物。我按菌株搜索植物工作正常，返回具有所述菌株数据类型的植物列表。我的 findByPostedBy 几乎与 findByStrain 相同，我似乎无法找出这里的错误，因为它只是返回整个植物列表。可能是一个愚蠢的错误，因为我是菜鸟。

我可以确认在 get 方法中发送到数据库的用户名是正确的。

plant.service.js

import http from "../http-common";

class PlantDataService {
  getAll() {
    return http.get("/plants");
  }

  get(id) {
    return http.get(`/plants/${id}`);
  }

  create(data) {
    return http.post("/plants", data);
  }

  update(id, data) {
    return http.put(`/plants/${id}`, data);
  }

  delete(id) {
    return http.delete(`/plants/${id}`);
  }

  deleteAll() {
    return http.delete(`/plants`);
  }

  findByStrain(strain) {
    return http.get(`/plants?strain=${strain}`);
  }

  findByPostedBy(postedBy) {
    return http.get(`/plants?postedBy=${postedBy}`);
  }
}

export default new PlantDataService();

Plants-List.component.js

import React, { Component } from "react";
import PlantDataService from "../services/plant.service";
import { Link } from "react-router-dom";
import PlantView from "../views/PlantView";
import userProfile from "../profile/userProfile";

export default class PlantsList extends Component {
  constructor(props) {
    super(props);
    this.onChangeSearchStrain = this.onChangeSearchStrain.bind(this);
    this.retrievePlants = this.retrievePlants.bind(this);
    this.refreshList = this.refreshList.bind(this);
    this.setActivePlant = this.setActivePlant.bind(this);
    this.removeAllPlants = this.removeAllPlants.bind(this);
    this.searchStrain = this.searchStrain.bind(this);
    this.searchByCurrentUser = this.searchByCurrentUser.bind(this);

    this.state = {
      plants: [],
      userPosts: [],
      currentPlant: null,
      currentIndex: -1,
      searchStrain: "",
      currentUser: userProfile.getName()
    };
  }

  componentDidMount() {
    this.searchByCurrentUser();

  }

  onChangeSearchStrain(e) {
    const searchStrain = e.target.value;

    this.setState({
      searchStrain: searchStrain
    });
  }

  postedByCurrentUser(creatorOfPost) {
    if(creatorOfPost === this.state.currentUser){
      return true;
    } 
    return false;
  }

  retrievePlants() {
    PlantDataService.getAll()
      .then(response => {
        this.setState({
          plants: response.data
        });
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  }

  refreshList() {
    this.retrievePlants();
    this.setState({
      currentPlant: null,
      currentIndex: -1
    });
  }

  setActivePlant(plant, index) {
    this.setState({
      currentPlant: plant,
      currentIndex: index
    });
  }

  removeAllPlants() {
    PlantDataService.deleteAll()
      .then(response => {
        console.log(response.data);
        this.refreshList();
      })
      .catch(e => {
        console.log(e);
      });
  }

  searchStrain() {
    PlantDataService.findByStrain(this.state.searchStrain)
      .then(response => {
        this.setState({
          plants: response.data
        });
        console.log(response.data);
         console.log("Plants");
        console.log(this.state.plants);
      })
      .catch(e => {
        console.log(e);
      });
  }
  
  searchByCurrentUser() {
    console.log(this.state.currentUser);
    PlantDataService.findByPostedBy(this.state.currentUser)
     .then(response => {
        this.setState({
          plants: response.data
        });
        console.log(response.data);
        console.log("Plants");
        console.log(this.state.plants);
        console.log(this.state.currentUser);
      })
      .catch(e => {
        console.log(e);
      });
  }

  render() {
     const { searchStrain, plants, userPosts, currentPlant, currentIndex } = this.state;

    return (
      <div>
        
      
      <div className="list row">
        <div className="col-md-8">
          <div className="input-group mb-3">
            <input
              type="text"
              className="form-control"
              placeholder="Search by strain"
              value={searchStrain}
              onChange={this.onChangeSearchStrain}
            />
            <div className="input-group-append">
              <button
                className="btn btn-outline-secondary"
                type="button"
                onClick={this.searchStrain}
              >
                Search
              </button>
            </div>
          </div>
        </div>
        <div className="col-md-6">
          <h4>Plants List</h4>

          <ul className="list-group">
            {
             plants &&
                plants.map((plant, index) => (
                <li
                  className={
                    "list-group-item " +
                    (index === currentIndex ? "active" : "")
                  }
                  onClick={() => this.setActivePlant(plant, index)}
                  key={index}
                >
                  {plant.strain}
                </li>
              ))}
          </ul>

          <button
            className="m-3 btn btn-sm btn-danger"
            onClick={this.removeAllPlants}
          >
            Remove All
          </button>
        </div>
        <div className="col-md-6">
          {currentPlant ? (
            <div>
              <h4>Plant</h4>
              <div>
                <label>
                  <strong>Strain:</strong>
                </label>{" "}
                {currentPlant.title}
              </div>
              <div>
                <label>
                  <strong>Date Planted:</strong>
                </label>{" "}
                {currentPlant.datePlanted}
              </div>
              <div>
                <label>
                  <strong>Sex:</strong>
                </label>{" "}
                {currentPlant.sex}
              </div>
              <div>
                <label>
                  <strong>Class:</strong>
                </label>{" "}
                {currentPlant.class}
              </div>
              <div>
                <label>
                  <strong>Posted By:</strong>
                </label>{" "}
                {currentPlant.postedBy}
              </div>
              

              <Link
                to={"/plants/" + currentPlant.id}
                className="badge badge-warning"
              >
                Edit
              </Link>
            </div>
          ) : (
            <div>
              <br />
              <p>Please click on a Plant...</p>
            </div>
          )}
        </div>
      </div>
    </div>
    );
  }
}

Answer 1

如果您检查了 API 是否使用像 Postman 这样的 HTTP 客户端工作，这可能是一个后端问题。 此外，我认为查询由用户名创建的植物不是一个好主意，因为它可能会导致冲突。使用用户 ID。

如果您有一个名为 users 的表，其中包含数据

id, name, created_at, updated_at
123, xyz, --,         , --  

像这样存储它

id, plant, ..., created_by
124, abc, ..., 123

然后就可以使用用户id查询了。