javascript - 使用 ReactJs 和 Node.js 构建搜索过滤器

Question

应用程序在 Node.js 和 React 上运行。在数据库(使用 mongodb)中，我有收集房间，其中包含有关特定房间的详细信息。

我正在尝试根据客人数量等来搜索该集合，如果搜索输入中的客人数量为 2，我想显示可容纳两名客人的所有房间。

我的问题是是否可以对收藏室中的每个字段进行搜索输入？例如客人人数、房型、价格等等...

另外，使用搜索输入还是下拉搜索更好？

服务器部分

UserModel.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Define our model
const roomSchema = new Schema({
    title: { type: String },
    description: { type: String },
    price: { type: Number },
    room_type: { type: String },
    nb_guests: { type: Number },
    imageData: {type: String}
});

// Create the model class
const ModelClass = mongoose.model('room', roomSchema);

// Export the model
module.exports = ModelClass;

客户端部分

LandingPage.js

const Room = props => (
    <div className = "col-md-4" >
        <div className="card mb-4 shadow-sm">
            <img src={room9} class="card-img-top" 
             alt="..." width="100%" height="225" />
            <div className="card-body">
                <h5 class="card-title">{props.room.title}</h5>
                <p className="card-text">{props.room.description}</p>
                <div className="d-flex justify-content-between align- 
                       items-center">
                    <div className="btn-group">
                    <Link  className="btn btn-sm 
                    btn-outline-secondary" to={"/view/"+props.room._id}>View</Link>
                    </div>
                </div>
            </div>
        </div>
    </div >
)

function searchingFor(term){
    return function(x){
        return x.props.room.nb_guests.toLowerCase().includes(term.toLowerCase()) || !term;
    }
}
    export default class LandingPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = { 
                rooms: [],
                term:''
            }
            this.onSearchHandler = this.onSearchHandler.bind(this);
        }

        componentDidMount() {
            axios.get('http://localhost:3090/admin/')
                .then(response => {
                    this.setState({
                        rooms: response.data
                    })
                        .catch(function (error) {
                            console.log(error);
                        })
                })
        }

        roomList() {
            return this.state.rooms.filter(searchingFor(this.state.term)).map(function (currentRoom, i) {
                return <Room room={currentRoom} key={i} />
            });
        }

        onSearchHandler(e){
            this.setState({
                term:e.target.value
            })
        }
        render() {
            return (
                <div>
                    <LPheader />
                    <Carousel />
                    <div>
                        <div className="album py-5 bg-light">
                            <div className="container">
                                <div className="row">
                                    <form>
                                        <input 
                                        type="text"
                                        onChange={this.onSearchHandler}
                                        value={term}
                                        />
                                    </form>
                                    {this.roomList()}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
    }

这是我开始使用的代码，但我收到此错误

Uncaught ReferenceError :术语未定义

说实话，我什至不确定这是否是正确的方法，任何建议将不胜感激。

更新

roomList = () => {
        const { rooms, term } = this.state;

        if (!term) {
          return rooms.map(function(currentRoom, i) {
            return <Room room={currentRoom} key={i} />;
          });
        } else if {
          return rooms
            .filter(room => {
              return room.nb_guests == term;
            })
            .map(matchingRoom => {
              return <Room room={matchingRoom} />;
            });
            else if{
                .filter(room => {
                    return room.price == term;
                  })
                  .map(matchingRoom => {
                    return <Room room={matchingRoom} />;
                  });
                  else if{
                    .filter(room => {
                        return room.room_type == term;
                      })
                      .map(matchingRoom => {
                        return <Room room={matchingRoom} />;
                      });
            }
        }
      };

      onSearchHandlerPrice = e => {
        this.setState({
          term: (e.target.value)
        });
      };

      onSearchHandlerGuests = e => {
        this.setState({
          term: (e.target.value)
        });
      };


<div className="container">
<div className="row">
  <form>
    <input type="text" onChange={this.onSearchHandlerGuests} value={this.state.term} />
  </form>

  <form>
    <input type="text" onChange={this.onSearchHandlerPrice} value={this.state.term} />
  </form>
  {this.roomList()}
</div>
</div>

Answer 1

您已经非常接近完成这件事了。我认为 searchingFor() 函数使您的逻辑过于复杂。请参阅以下沙箱，了解如何按客人数量过滤房间:https://codesandbox.io/s/thirsty-dan-vjt7o

注释:

• 我注释掉了 axios 请求并插入了一些示例数据。如果您用自己的代码将其交换回来，它应该仍然可以工作。

您可以通过在用户键入时更新 term 状态值来简化代码，从而导致重新渲染并在新执行的 roomList()、过滤器和返回与 term 匹配的适当房间。

  roomList = () => {
    const { rooms, term } = this.state;

    if (!term) {
      return rooms.map(function(currentRoom, i) {
        return <Room room={currentRoom} key={i} />;
      });
    } else {
      return rooms
        .filter(room => {
          return room.nb_guests == term;
        })
        .map(matchingRoom => {
          return <Room room={matchingRoom} />;
        });
    }
  };

  onSearchHandler = e => {
    this.setState({
      term: e.target.value
    });
  };