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

此方法存在的问题：

＆＃13;

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]});
}

＆＃13;

在第

行

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

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

this.state.filteredResults.push(currency)

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

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

Answer 2

这种方法正在改变状态，绕过了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]});
  }

使用filter等方法提供新的数组引用：

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

同样正如其他海报中提到的那样，将filterResults声明为一个对象（如果你只是要显示一个过滤结果），因为它从一个数组变为另一个。

this.state = {filteredResults: {}};

清除反应中的价值状态

2 个答案: