javascript - 一个函数中使用双重 setState 方法

Question

我正在尝试创建一个自动完成组件。这是用户输入国家/地区名称的输入，如果字母与某个国家/地区的名称匹配，则会显示提示。在我的应用程序组件中，我有方法 handleChange 在这个方法中，我更改了状态两次，这是个坏主意。如何将其拆分以通过不同的方法更改状态？

import React, { Component } from 'react';
import AutoComplete from './autoComplete.jsx';
import data from './data.json';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      resoults: []
    }
  }

  handleChange() {
    let inputValue = this.refs.input.value;
    this.setState({
      inputValue: inputValue
    });

      let regular = "^" + this.state.inputValue;
      let reg = new RegExp(regular , "i");
      let filtered = data.filter((i,index)=> {
      return (reg.test(i.name)
        );
    });
    console.log(filtered);
          this.setState({resoults:filtered})
  }

  render() {
    return (
      <div>
        <input onChange={this.handleChange.bind(this)} type="text" ref="input"/>
        <h3>You typed: {this.state.inputValue}</h3>
        <AutoComplete resoults={this.state.resoults} />
      </div>
      );
  }

}

export default App;

import React, {Component} from 'react';

class AutoComplete extends Component {


    render() {
        return (
            <div>
                <h4>autocompleteComponent</h4>
                {this.props.resoults.map((i)=> {
                    return (
                        <ul>
                            <li>{i.name}</li>
                        </ul>
                    );
                })}
            </div>
        );
    }
}

export default AutoComplete;

Answer 1

我发现自己多次处于这个位置，但我得出的结论是，最好计算自动完成选项(在您的情况下)，而不让它们处于组件的状态。

正如我到目前为止所使用的那样，组件的状态和属性应该代表渲染该特定组件所需的最少数据。由于您在状态中有输入值，因此那里的自动完成选项对我来说似乎也是多余的。所以这是我的建议:

class App extends Component {
  this.state = {
    inputValue: '',
  };

  handleChange(e) {
    const inputValue = e.target.value;
    this.setState({
      inputValue,
    });
  }

  computeResults() {
    const {inputValue} = this.state;
    // your functionality for computing results here
  }

  render() {
    const {inputValue} = this.state;
    const results = this.computeResults();

    return (
      <div>
        <input type="text" onChange={this.handleChange.bind(this)} value={inputValue} />
        <h2>You typed: {inputValue}</h2>
        <Autocomplete results={results} />
      </div>
    );
  }
}

<小时/>

注释

1. 由于您的结果是通过 .json 导入同步得出的，这对我来说似乎是完美的解决方案。如果您想通过 fetch 或其他任何方式获取它们，那么您必须找出稍微不同的方法，但请记住组件的状态不应包含冗余数据。<
2. 停止将 ref 与 string 值一起使用! 并在存在 absolutely no other way 时使用 ref 因为 React 组件通常不应该直接处理 DOM 操作。如果您确实需要使用 ref，请使用 ref callbacks 。

希望这有帮助!