React Recompose 초기 상태 값 양식 비동기 소스

Question

recompose의 예에서 withState의 초기 값은 빈 문자열입니다. 데이터베이스 또는 동적 소스 형식의 값이 필요한 경우 어떻게해야 해당 소품 변경 사항을 업데이트 할 수 있습니까? 예를 들어

:

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

Answer 1

주어진 예제에서, 나는 단지 분지 화되었다.

v4 난 단지 이러한 특정 구성 요소가로드가 완료된 것으로 간주 될 때까지 렌더링되지 않을 것이라고 확신하기 위해 경쟁 조건이있는 것 같습니다. 이제 원래 코드로 돌아갈 수 있습니다.

v3 다음 작품과 더 나은 방법이나 내가 재구성 내에서 사용할 수있는 도구 일 것입니다. branch을 제거하고 내가 원하는 것을 달성 할 수 있었다 withPropsOnChange을 추가함으로써

V2

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

. 당신은 비동기 상태 아래에있는 값을 얻을, 다음 업데이터를 호출 할 수 있습니다

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이 첫 번째 시도 (또는 그렇게 보였다). 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) 
)