Question

我是新来的反应者，并且我正在一个小项目中，该项目使用搜索栏查找我从数据库中获取的数据。

该组件的代码如下：

import React, { Component } from 'react';

class BodyData extends Component {
    state = {
        query: '',
        data: [],
    }

    handleInputChange = () => {
        this.setState({
            query: this.search.value
        })
        this.filterArray();
    }

    getData = () => {
        fetch(`http://localhost:4000/restaurants`)
        .then(response => response.json())
        .then(responseData => {
            // console.log(responseData)
            this.setState({
                data:responseData
            })
        })
    }

    filterArray = () => {
        var searchString = this.state.query;
        var responseData = this.state.data
        if(searchString.length > 0){
            // console.log(responseData[i].name);
            responseData = responseData.filter(l => {
                console.log( l.name.toLowerCase().match(searchString));
            })
        }
    }

    componentWillMount() {
        this.getData();
    }
    render() {
        return (
            <div className="searchForm">
                <form>
                    <input type="text" id="filter" placeholder="Search for..." ref={input => this.search = input} onChange={this.handleInputChange}/>
                </form>
                <div>
                    {
                        this.state.data.map((i) =>
                            <p>{i.name}</p>
                        )
                    }
                </div>
            </div>
        )
    }
}


export default BodyData;

所以基本上，我想在输入查询文本时更新状态，并减少我映射的餐厅名称，直到找到匹配项为止。

据我了解，当我在搜索栏中输入查询内容时，this.state.data将被过滤。但是，当我绘制this.state.data时，会得到整个餐厅列表，而不是我想要看到的。

我已经经历了很多研究，但我不确定如何去做。

有人可以帮我吗？也欢迎对代码进行任何其他注释。我在这里学习：）

谢谢！

Answer 1

这是适合您的代码

import React, { Component } from 'react';

class BodyData extends Component {

state = {
    query: '',
    data: [],
    searchString:[]
}

handleInputChange = (event) => {
    this.setState({
        query: event.target.value
    },()=>{
  this.filterArray();
})

}

getData = () => {
    fetch(`http://localhost:4000/restaurants`)
    .then(response => response.json())
    .then(responseData => {
        // console.log(responseData)
        this.setState({
            data:responseData,
            searchString:responseData
        })
    })
}

filterArray = () => {
    let searchString = this.state.query;
    let responseData = this.state.data;



    if(searchString.length > 0){
        // console.log(responseData[i].name);
        responseData = responseData.filter(searchString);
this.setState({
   responseData
})
    }

}

componentWillMount() {
    this.getData();
}
render() {
    return (
        <div className="searchForm">
            <form>
                <input type="text" id="filter" placeholder="Search for..."  onChange={this.handleInputChange}/>
            </form>
            <div>
                {
                    this.state.responseData.map((i) =>
                        <p>{i.name}</p>
                    )
                }
            </div>
        </div>
    )
  }
}


export default BodyData;

几乎不需要更改。

设置状态是异步工作的。因此，当需要在设置状态后立即执行某些操作时，请避免使用箭头功能。
es6中有2个不同的关键字而不是var。让和 const 。用它们代替var。
在输入中不需要引用。您可以通过event.target.value

享受编码！

Answer 2

您可以保留另一个状态，例如filteredData包含data中所有包含名称中的query的元素，然后进行渲染。

示例

class BodyData extends React.Component {
  state = {
    query: "",
    data: [],
    filteredData: []
  };

  handleInputChange = event => {
    const query = event.target.value;

    this.setState(prevState => {
      const filteredData = prevState.data.filter(element => {
        return element.name.toLowerCase().includes(query.toLowerCase());
      });

      return {
        query,
        filteredData
      };
    });
  };

  getData = () => {
    fetch(`http://localhost:4000/restaurants`)
      .then(response => response.json())
      .then(data => {
        const { query } = this.state;
        const filteredData = data.filter(element => {
          return element.name.toLowerCase().includes(query.toLowerCase());
        });

        this.setState({
          data,
          filteredData
        });
      });
  };

  componentWillMount() {
    this.getData();
  }

  render() {
    return (
      <div className="searchForm">
        <form>
          <input
            placeholder="Search for..."
            value={this.state.query}
            onChange={this.handleInputChange}
          />
        </form>
        <div>{this.state.filteredData.map(i => <p>{i.name}</p>)}</div>
      </div>
    );
  }
}

Answer 3

setState方法是异步的，它具有第二个参数-应用状态时调用的回调。

您需要更改handleInputChange方法。

handleInputChange = () => {
    this.setState({
        query: this.search.value
    }, this.filterArray)
}

Answer 4

我想展示的指针很少-

setState({})函数是异步的，您必须使用函数setState并调用filteredArray方法作为回调。或者，在filteredArray处致电render，这将更新并反映您的值。
您的filterArray方法未返回/设置过滤后的数据列表。因此，即使您输入的内容已被过滤，也不会在任何地方设置/返回。

如何在ReactJS中创建搜索字段

4 个答案: