0

在以下示例中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>
)
4

2 回答 2

1

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

v4我只是似乎有竞争条件，所以我确保这些特定组件在考虑完成加载之前不会呈现。现在我可以回到原来的代码了；

v3以下作品，也许它们是我可以在 recompose 中使用的更好的方法或工具。

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-24T02:33:21.087 回答
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)
)
于 2017-05-24T13:46:13.623 回答