リダクターが起動して誤って入力がクリアされる

Question

私はGoogle APIのAPI呼び出しを行っています。何らかの理由により、減速器が起動すると、コンポーネントの状態はクリアされ、入力フィールドは空白になります。これは、減速機が点火するときにのみ起こるように見える。私はちょうどthis.setState何もクリア...

ここに私の入力コンポーネントです。あなたの減速が発射された場合、ここで

constructor(props) { 
    super(props) 
    this.state = { 
     address: '', 
    } 
    } 

    handleKeyPress = (e) => { 
    if (e.key === 'Enter') { 
     this.getCordinates() 
    } 
    } 

    onChange = (e) => { 
    this.setState({address: e.target.value}) 
    } 

    getCordinates = (latLng) => { 

     this.props.callTimeZoneAPI(lat,lng) 

    } 


    render() { 



    return (
     <input type="text" 
       className="location_input" 
       onChange={this.onChange} 
       value={this.state.address} 
       onKeyPress={this.handleKeyPress} 
       /> 

は私の減速

const initStateOfTimeZones = { 
    TimeZones: [], 
    Times: [], 
    Date: [] 
} 
switch(type){ 
    case ADD_TIME_ZONE: 


    return assign({}, state, { 
     TimeZones: payload 
    }); 


    default: 

     return state 

Answer 1

で、コンポーネントが再レンダリングです。入力に割り当てられたキーもないので、再レンダリング時に値が失われます。入力が変更されると（再レンダリングにより）、その状態は新しい入力と一致するように更新されます。私は以下の入力にキーを追加しました。複数の入力がある場合は、そのキーが一意であることを確認してください。

<input type="text" 
      className="location_input" 
      key = "uniqueInputKey" 
      onChange={this.onChange} 
      value={this.state.address} 
      onKeyPress={this.handleKeyPress} 
      />