React重新組態初始狀態值窗體異步源

在recompose的以下示例中，withState的初始值爲空字符串。如果您需要數據庫或動態數據源的價值，那麼您將如何更新此支持更改？React重新組態初始狀態值窗體異步源

例如：

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

從 recompose

原始代碼;

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> 
)

來源

2017-05-24 Perspective

鑑於上面的例子，我只是分支;

v4我似乎有競爭條件，所以我確信這些特定的組件不會呈現，直到它被認爲是完成加載。現在我可以回到原來的代碼了;

v3下面的工作，也許他們是一個更好的方式或工具，我可以在重組內使用。

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

V2通過消除branch和添加withPropsOnChange我能夠實現我想要的東西。（或者看起來如此）

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

V1第一次嘗試：（沒有工作了太清楚）

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> 
)

來源

2017-05-24 02:33:21 Perspective

做這些事情的一個問題彈出-ED從上面的實現了，如果'name'屬性不存在的形式永遠不會爲從來沒有創建的名稱屬性的用戶加載。 – Perspective

你可以得到價值異步下面的狀態，然後調用更新。 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) 
)

來源

2017-05-24 13:46:13 Isaddo

@lsaddo是啊，謝謝你，並鏈接到文檔。我通常儘量避免生命週期，但這是有道理的。 – Perspective

React重新組態初始狀態值窗體異步源

回答

相關問題