努力沒有得到響應的一個變化下旬

Question

所以我有一個輸入：

的onChange此輸入的值獲取的更新，並存儲在道具持久性，但是這是無關的問題。

如果在數據庫中找到輸入值，我將在字段旁邊添加複選標記。

我已經有調用API，並回答設立（我的終極版減速）：

import EventTypes from '../EventTypes'; 

const initialState = { 
    response: {}, 
}; 

export default (state = initialState, action) => { 
    switch (action.type) { 
     case EventTypes.EXISTS_FULFILLED.type: 
      console.log(action.payload.body().data()); 
      return { ...state, response: action.payload.body().data() }; 
     default: 
      return state; 
    } 
}; 

注意上面的控制檯日誌正確打印​​真/假值（+送價值，我得到兩個從服務器返回）。

但在調用此組件：

const defaultProps = { 
    onChange:() => { 
    }, 
    value: { type: '' }, 
    provider: { type: '' }, 
}; 

class InputsComponent extends Component { 

    onChange =() => { 
     this.props.onChange(this.props.id); 
    }; 

    updateFirstInput(event) { 
      const { onChange, exists, response } = this.props; 
      const payload = { 
       objectType: this.props.placeholder.toLowerCase(), 
       objectName: event.target.value, 
      }; 
      exists(payload); 
      this.setState({ firstInput: event.target.value }); 
      onChange({ value: { 
       ...this.state, 
       firstInput: event.target.value, 
      } }, this.props.id); 
      setTimeout(() => { 
       this.setState({ exitsStore: response }); 
      }, 200); 
      setTimeout(() => { 
       console.log(this.state.exitsStore); 
      }, 1000); 
     } 

控制檯日誌都是空的第一次「updateFirstInput（）」之稱，然後始終一個人「的onChange」的背後被準確。

這是「你好」：

[input value] [ console log of value for which presence on the server is true/false] 
"h"    "" 
"he"    "h" 
"hel"   "he" 
"hell"   "hel" 
"hello"   "hell" 

一段時間後，我想通了，這是怎麼回事。

我已經試過這樣：

const defaultProps = { 
    onChange:() => { 
    }, 
    value: { type: '' }, 
    provider: { type: '' }, 
}; 

class InputsComponent extends Component { 

    onChange =() => { 
     this.props.onChange(this.props.id); 
    }; 

checkExists(object){ 
    const { exists, response } = this.props; 
    const payload = { 
     objectType: this.props.placeholder.toLowerCase(), 
     objectName: object, 
    }; 
    exists(payload); 
    return response; 
} 

updateFirstInput(event) { 
    const { onChange } = this.props; 
    this.setState({ firstInput: event.target.value }); 
    onChange({ value: { 
     ...this.state, 
     firstInput: event.target.value, 
    } }, this.props.id); 
    const response = await this.checkExists(event); 

    console.log(response); 
    this.setState({ exitsStore: response }); 

    console.log('stored data :'); 
    console.log(this.state.exitsStore); 
} 

但出於某種原因，人們在網上建議我們使用的await沒有提供上下文。以上內容甚至不可編輯。 （npm開始將失敗）

甚至在該ESLint表明「await是期待換行符或分號的保留字」之前。

但我很確定上面甚至正確syntaxe也不會工作。

它可能不會等待，但我如何設法從服務器（理想情況下）在一個單一的功能，即調用輸入更新相同的功能來填充響應。

Constrainst：

據我知道你不能兼得的onblur和的onChange相同的輸入這樣以來我已經使用的onChange沒有的onblur。

我不能在父母或其他人中調用任何這樣的東西：有多個輸入字段作爲子元素，我需要將值檢查和複選標記出現在孩子內部，以便能夠將值匹配到一起。

UPDATE：

，如果我只是刪除定時器：

const defaultProps = { 
    onChange:() => { 
    }, 
    value: { type: '' }, 
    provider: { type: '' }, 
}; 

class InputsComponent extends Component { 

    onChange =() => { 
     this.props.onChange(this.props.id); 
    }; 

updateFirstInput(event) { 
     const { onChange, exists, response } = this.props; 
     const payload = { 
      objectType: this.props.placeholder.toLowerCase(), 
      objectName: event.target.value, 
     }; 
     exists(payload); 
     this.setState({ firstInput: event.target.value }); 
     onChange({ value: { 
      ...this.state, 
      firstInput: event.target.value, 
     } }, this.props.id); 
     this.setState({ exitsStore: response }); 
     console.log(this.state.exitsStore); 
    } 

...兩個電話後面。

Answer 1

反應到救援的方便的預先存在的方法。

在這種情況下：componentWillRecieveProps()。

componentWillReceiveProps(newProps) { 
    const response = newProps.response; 
    const old = this.props.response; 
    console.log(response); 
    const id = this.props.id; 
    if (response !== old && response.objectIdentifier === id) { 
     if (response.activ) { 
      if (response.isthere) { 
       this.setState({ inputIcon: 4 }); 
      } else { 
       this.setState({ inputIcon: 3 }); 
      } 
     } else { 
      this.setState({ inputIcon: 2 }); 
     } 
    } 
} 
onChange =() => { 
    this.props.onChange(this.props.id); 
}; 
updateInput(event) { 
    const { onChange, exists, response } = this.props; 
    const inputValue = event.target.value; 
    this.setState({ input: inputValue }); 
    onChange({ value: { 
     ...this.state, 
     input: inputValue, 
    } }, this.props.id); 
    if (inputValue === '') { 
     this.setState({ inputIcon: 0 }); 
    } else { 
     const placeHolder = this.props.placeholder.toLowerCase(); 
     const objectIdentifier = this.props.id; 
     const payload = { 
      objectType: placeHolder, 
      objectName: inputValue, 
      objectIdentifier, 
     }; 
     exists(payload); 
     this.setState({ 
      existStore: response, 
     }; 
    } 
} 

爲什麼這個工作的原因是componentWillRecieveProps()默認接收參數，它是更新的道具狀態，這一次確實是新的。你可以像我一樣檢查是否確實有更新：檢查道具中的對象是否對傳遞的參數進行檢查，並且只在它們不同時執行你的動作。

我需要對這篇文章進行編輯，因爲我很難用正確的開發者術語表達這一點！

Answer 2

setState是異步的。看起來您正在使用超時來試圖解決這個問題，但這是一種非常粗暴而且很殘酷的方式來「解決」問題，並且實際上並沒有解決問題（如您的結果所示）。

但是當你需要在「之後」運行代碼時，setState有處理程序可用。你只需傳入一個回調函數作爲第二個參數即可。例如。;

this.setState({ 
    exitsStore: response 
},() => { 
    console.log(this.state.exitsStore); 
});