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

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

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

React Recompose初始状态值表单Async Source

2 个答案: