React Recompose Initial state value form Async Source答案

【问题标题】：React Recompose Initial state value form Async SourceReact Recompose Initial state value form Async Source
【发布时间】：2017-10-24 04:16:56
【问题描述】：

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

【问题讨论】：

标签： reactjs recompose

【解决方案1】：

可以在状态下异步获取值，然后调用更新器。 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)
)

【讨论】：

@lsaddo 是的，感谢您提供此链接并链接到文档。我通常会尽量避免生命周期，但这是有道理的。

【解决方案2】：

鉴于上面的例子，我只是分支；

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

【讨论】：

从上述实现中弹出一个问题，如果 name 属性不存在，则表单将永远不会为从未创建过 name 属性的用户加载。