React Recompose初期状態値フォームAsync Source

Question

recomposeの次の例では、withStateの初期値は空の文字列です。データベースや動的ソースの値を必要とする場合は、その小道具の変更をどのように更新しますか？例えば

：recomposeから

withState('value', 'updateValue', (user) => user.name) 

オリジナルコードと

const enhance = compose(
    withState('value', 'updateValue', ''), 
    withHandlers({ 
    onChange: props => event => { 
     props.updateValue(event.target.value) 
    }, 
    onSubmit: props => event => { 
     event.preventDefault() 
     submitForm(props.value) 
    } 
    }) 
) 

const Form = enhance(({ value, onChange, onSubmit }) => 
    <form onSubmit={onSubmit}> 
    <label>Value 
     <input type="text" value={value} onChange={onChange} /> 
    </label> 
    </form> 
) 

Answer 1

上記の例では、分岐したばかりです。

v4私はちょうど競合条件があるようですので、これらの特定のコンポーネントは、読み込みが完了するまでレンダリングされませんでした。今私は元のコードに戻ることができます。

v3次のようなものがあり、おそらくそれらは再構成で使用できるより良い方法またはツールです。

withState('value', 'updateValue', ''), 
withPropsOnChange(['name'], (props) => assign(props, { value: props.name })), 

V2branchを削除し、私は私が欲しかったものを達成することができましたwithPropsOnChangeを加えることで。あなたが非同期状態の下の値を取得して、アップデータを呼び出すことができます

const enhance = compose(
    branch(
    ({ name }) => !name, 
    renderNothing 
) 
    withState('value', 'updateValue', ({ name }) => name), 
    withHandlers({ 
    onChange: props => event => { 
     props.updateValue(event.target.value) 
    }, 
    onSubmit: props => event => { 
     event.preventDefault() 
     submitForm(props.value) 
    } 
    }) 
) 

const Form = enhance(({ value, onChange, onSubmit }) => 
    <form onSubmit={onSubmit}> 
    <label>Value 
     <input type="text" value={value} onChange={onChange} /> 
    </label> 
    </form> 
) 

Answer 2

（あまりにもうまく動作しませんでした）：

withPropsOnChange(['name'], ({ name }) => ({ name })), 
withState('nameValue', 'updateNameValue', ({ name }) => name), 

V1が最初の試行（またはので、見えました）。 `name`のプロパティは、フォームが作成された名前のプロパティを持つことはありませんユーザーのためにロードすることはない存在しない場合React Docsは、componentDidMount

const enhancer = compose(
    withState('value', 'updateValue', ({ name }) => name), 
    withHandlers({ 
    onChange: props => event => { 
     props.updateValue(event.target.value) 
    }, 
    onSubmit: props => event => { 
     event.preventDefault() 
     submitForm(props.value) 
    } 
    }), 
    lifecycle({ 
    componentDidMount() { 
     fetchName().then(this.props.updateValue) 
    } 
    }), 
    branch(({ name }) => !name,() => null) 
)