setState之后組件不會重新呈現

Question

我最近剛開始使用React，並且想要構建一個小應用程序來獲取天氣數據。 我的API具有返回自動完成建議的功能。 因此，當我的自動提示數組不為空時，我呈現一個列表，並在單擊<li>'s之一時，我希望該值位於輸入框內。 我設法設置了SearchBar的狀態，但是無法更改其值。

編輯 ：我嘗試將我的值從changeState()放入我的<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} /> 。 我可以搜索其他術語。

import React from 'react';
import './SearchBar.css';
import Suggestion from './Suggestion';

class SearchBar extends React.Component{
  constructor(props) {
    super(props);
    this.state = {inputValue: ''};
    this.search = this.search.bind(this);
    this.updateInputValue = this.updateInputValue.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.changeState = this.changeState.bind(this);
  }

  changeState(value) {
    console.log(value);
    // Logs value of text between <li></li>
    this.setState({inputValue: value});
  }

  search() {
    this.props.onSearch(this.state.inputValue);
  }

  updateInputValue(evt) {
    this.setState({
      inputValue: evt.target.value
    });
    this.props.onChange(this.state.inputValue);
  }

  handleKeyPress(e) {
    if(e.key === 'Enter') {
      this.search();
    }
  }

  render() {
    return (
      <div>
        <div className="SearchGroup" onKeyPress={this.handleKeyPress} >
          <input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} />
          <a onClick={this.search}>Go</a>
        </div>
        <Suggestion autocomplete={this.props.autocomplete} onSelect={this.changeState} />
      </div>
    );
  }
}

export default SearchBar;

為了完整性，我的Suggestion.js ：

import React from 'react';
import './Suggestion.css';

class Suggestion extends React.Component{
  constructor(props) {
    super(props);
    this.updateInputField = this.updateInputField.bind(this);
  }

  updateInputField(evt) {
    this.props.onSelect(evt.currentTarget.innerText);
  }

  render(){
      if(this.props.autocomplete && this.props.autocomplete.length > 0) {
        return (
          <div className="Suggestion">
            <ul>
              {
                this.props.autocomplete.map((location) => {
                  return (
                    <li key={location.id} onClick={this.updateInputField}>{location.name}</li>
                  )
                })
              }
            </ul>
          </div>
        );
      } else {
        return <div className="None"></div>
      }
  }
}

export default Suggestion;

我也希望在“ Suggestion提交location.url ，但是找不到與evt內部匹配的屬性。

Answer 1

如我的評論中所述。 您正在設置狀態，並立即將狀態傳遞給updateInputValue事件處理函數中的onChange函數，這是不正確的。 由於您不會立即更新狀態值，因此狀態值僅在呈現時才更新，因此請像下面這樣直接傳遞evt.target.value

updateInputValue(evt) { 
   this.setState({ inputValue: evt.target.value }); 
   this.props.onChange(evt.target.value);
}

為了在您的輸入字段上看到更改的值，您必須將value屬性傳遞給輸入標簽，如下所示

<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} value={this.state.inputValue}/>

Answer 2

我猜您正在嘗試使用尚未存在的狀態的值，因為setState是異步的，因此可以在setState上使用回調

updateInputValue(evt) {
  this.setState({
    inputValue: evt.target.value
  }, ()=> this.props.onChange(this.state.inputValue));
}

或者，直接使用event中的值

updateInputValue(evt) {
  const value = evt.target.value
  this.setState({
    inputValue: value
  });
  this.props.onChange(value)
}

另外，您還沒有將值分配回您的輸入：

<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} value={this.state.inputValue}/>

Answer 3

React setState不會立即更新狀態。 它將其放入隊列並批量更新狀態。 如果要訪問更新的狀態，請在setState callBack中編寫代碼

this.setState({ inputValue: evt.target.value},()=> this.props.onChange(this.state.inputValue));

像這樣的東西