Question

搜索功能在控制台日志中运行正常，但是当我尝试将该值分配给状态行时。因此，我将setState设置在searchHandler中setState内的行。我知道我犯了一个错误，但是我不知道如何纠正它。省略不确定的国家，将代码最小化为所需的

function searchingFor(searchingTerm) {
        return function(x){
            // console.log("searching",x);
            return x.name.toLowerCase().includes(searchingTerm.toLowerCase())|| false;
        }
    }

    class Main extends React.Component{

        componentWillMount(){
            this.props.fetchTopicsTableContent(this.state.sortBy,'ASC',0,this.props.match.params.CategoryName).then(result=> (this.setState({rows:result.payload.data})))
            this.props.countTableContent(this.props.match.params.CategoryName).then(result=>(this.setState({count:result.payload})));
        }

        constructor(props){
            super(props);

            this.state={
                rows:"",
                searchTerm:"",
                items:""
            }
        }

        onSubmit(values){
            values.preventDefault();

        }

        onSearchHandler(e){
            this.setState({searchTerm:e.target.value},()=>{
                {this.state.rows.filter(searchingFor(this.state.searchTerm)).map(item=>{
                    console.log(item);
                     //this.setState({rows:item})
                })}
            })
        }

        render(){
            return(
                <div>
                    <h3>Topics</h3>
                    <hr/>
                    <div>
                        <form onSubmit={this.onSubmit.bind(this)}>
                            <input type="text"
                                   className="searchBar"
                                   value={this.state.searchTerm}
                                   onChange={this.onSearchHandler.bind(this)}
                            />
                        </form>
                   </div>
               </div>
             )
        }

Answer 1

好吧，让我们开始在构造函数中绑定函数，而不是在标记中绑定函数，然后整理一下：P

接下来，我不确定您是否了解设置状态的工作原理，因为您的功能违背了它的基本用法。您正确设置了第一个状态并使用了回调（这是因为设置状态需要花费时间），这很棒。回调函数就在这里。

您的映射函数正在立即加载几个setState调用，对于每个console.log（）都会成功运行，但是只有setStates实际上会生效。最重要的是，即使它确实起作用，您的rows状态也只有一个项目。让我们尝试一下：

onSearchHandler(e){
    this.setState(prevState => {
        return {
            rows: prevState.rows.filter(searchingFor(e.target.value)),
            searchTerm: e.target.value,
        }
    });
}

这将为您带来我认为是理想结果的结果……您一次只能执行一个setState，除非您正在等待每个回调，因为您无法确定每个回调都会完成在下一个之前。

Answer 2

您的逻辑很好，但是代码看起来很笨拙。我对代码进行了重构，以使仅存在必要的逻辑，而不使用bind来使用箭头功能。在这里，在codeSandbox

上尝试此代码

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      rows: ["asd", "bsd", "csd", "dsd", "esd"],
      items: []
    }
  }

  onSearchHandler = (e) => {
    this.setState({ items: this.state.rows.filter(str => str.toLowerCase().includes(e.target.value.toLowerCase()))})
  }

  render(){
    return (
      <div>
        <h3>Topics</h3>
        <input type="text"
               className="searchBar" 
               onChange={(e) => this.onSearchHandler(e)}/>
        <p>{this.state.items.join('\n')}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

在反应中使用客户端搜索

2 个答案: