React Redux正確的方法迭代初始化數據

我在React中有一個表單，用戶可以在其中看到數據（通過加載時的異步返回）並對其進行內聯編輯。如果我通過鏈接從另一個頁面導航到表單，則表單按預期工作，因爲數據在主呈現功能之前加載，但是，如果使用表單刷新頁面，儘管數據仍未正確填充它通過道具來通過。React Redux正確的方法迭代初始化數據

所以： Initial render with loading div -> Data comes back -> Props set -> Render fires -> State is set

由於表單上輸入有從this.state設定初始值，他們是在第二呈現空白。但是，如果我從另一個頁面瀏覽此處，則所有內容都按照您的預期運行。看起來我錯過了一些關於React/Redux的東西。

這裏的底部呈現組件：

class ContactInfoForm extends React.Component { 
    constructor (props, context) { 
     super(props, context); 

     this.state = Object.assign({}, props.contactInfo); 

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

    handleChange(event) { 
     const target = event.target; 
     const value = target.type === 'checkbox' ? target.checked : target.value; 
     const name = target.name; 

     this.setState({ 
      [name]: value 
     }); 
    } 

    render() { 
     const { 
      contactInfo 
     } = this.props; 

     console.log(this.state); // {} - first render {} - second render 
     console.log(this.props); // {} - first render {stuff} - second render 

     return (
      <form> 
       <div className="col-xs-12"> 
        <TextInputGroup 
         name="email" 
         value={this.state.email} 
         onChange={this.handleChange} 
         floatedLabel="Email/Username" 
         placeholder="Email/Username" 
         className="AccountPreferences__field" 
         labelClass="AccountPreferences__label" 
        /> 
       </div> 
      </form> 
     ); 
    } 
}

我明白setState是異步的，這是有道理的，但我想知道什麼是初始化的反應，和/終極版形式的最佳方式。

來源

2017-06-08 bigjollygiant14

作爲參考，我一直在下面作出反應的指導形式：https://facebook.github.io/react/docs/forms.html#controlled-components – bigjollygiant14

你所面臨的問題，刷新頁面時正確？ –

正確。從其他網頁導航工作正常。在承諾回來並且組件重新呈現之後，'this.state'不會在加載時設置。 – bigjollygiant14

您需要使用componentWillReceiveProps生命週期方法，每當道具值發生任何更改時都會調用它，因此當時您需要更新狀態值。

使用此：

componentWillReceiveProps(newProps){ 
    this.setState(newProps.contactInfo); 
}

componentWillReceiveProps:

componentWillReceiveProps（）是一個安裝部件接收新道具之前調用。如果您需要更新狀態以響應prop更改（例如，重置它），您可以比較this.props 和nextProps，並使用this.setState（）以此方法執行狀態轉換。

來源

2017-06-08 20:01:01

看起來像這樣的工作，但是，我現在正在'TextInputGroup正在改變一個不受控制的輸入類型的文本被控制。當我在構造函數中創建'this.state'時，是否需要指定屬性？（第5行，而不是使用空對象） – bigjollygiant14

你也可以這樣做，定義所有的狀態變量，或者乾脆這樣做：'value = {this.state.email || 「」}'放一個** || 「」（空白值）**。原因最初是this.state.email在刷新頁面時將會是未定義的，因此它將成爲一個不受控制的組件，提供一個默認的空白值將使它成爲受控組件。 –

這一切都像它應該的工作！謝謝:) – bigjollygiant14

React Redux正確的方法迭代初始化數據

回答

相關問題