清除反应中的值状态

Question

使用 api 端点保存特定加密货币硬币的对象数组。

我创建了一个表单，用户可以在其中输入特定硬币并点击提交，它会返回价格。然后该硬币将检查它是否在 api 中的对象数组中。如果它有效，那么我将其推送到构造函数中的过滤结果数组中。

我的第一个搜索查询有效，但是当我进行第二个查询搜索并点击提交按钮时，它失败并重新加载页面。

  constructor() {
     super();
     this.state = {value: ''};
     this.state = {coin: []};
     this.state = {items: []};
     this.state = {filteredResults: []};

     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    let coin = this.state.value;
    this.findCoin(coin);
    event.preventDefault();
  }

  findCoin(id) {
    this.state.items.forEach(function(currency){
      if(currency.id === id) {
        this.state.filteredResults.push(currency)
      }
    }, this);

    this.setState({filteredResults: this.state.filteredResults[0]});
  }

  componentDidMount() {
    fetch(`https://api.coinmarketcap.com/v1/ticker/`)
      .then((result)=> {
        result.json()
      .then(json => {
        this.setState({items: json})
       });
    });
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.handleSubmit}>
           <label>
             Name:
             <input type="text" value={this.state.value} onChange={this.handleChange} />
           </label>
           <input type="submit" value="Submit" />
        </form>
        <div> Price: $ {this.state.filteredResults.price_usd}
        </div>
      </div>
    );
  }
}

Answer 1

这个方法是mutating state，绕过了React的状态检查；

  findCoin(id) {
    this.state.items.forEach(function(currency){
      if(currency.id === id) {
        this.state.filteredResults.push(currency)
      }
    }, this);

    this.setState({filteredResults: this.state.filteredResults[0]});
  }

使用过滤器等方法，提供新的数组引用：

const filtered = this.state.items.filter(ccy=> ccy.id === id);
this.setState({filteredResults: filtered[0]};

正如其他海报之一所提到的，将 filterResults 声明为一个对象（如果您只想显示一个过滤结果），因为它会从数组更改为对象。

this.state = {filteredResults: {}};

Answer 2

这个方法的问题：

findCoin(id) {
    this.state.items.forEach(function(currency){
        if(currency.id === id) {
            this.state.filteredResults.push(currency)
        }
    }, this);

    this.setState({filteredResults: this.state.filteredResults[0]});
}

在线

this.setState({filteredResults: this.state.filteredResults[0]});

您正在将filteredResults（这是一个数组）设置为一个对象，并在第二次搜索该行

this.state.filteredResults.push(currency)

给你一个错误，因为filredResults 是一个字符串没有push 方法。

由于您在handleSubmit 方法的最后一行有event.preventDefault，由于先前的错误并且表单正在提交，因此它没有执行。