刷新页面后不显示React - 选定的值

问题描述 投票:0回答:1

所以,我正在使用react-select让用户从选项列表中选择一个选项。它应该更新变化。我已经验证所选的选项确实正在更新到数据库中,并且在React chrome工具中检查输入时React会识别输入。令人费解的是刷新页面后如何显示它。

class ContractBasicForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      contractingEntity: props.contracting_entity
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      contractingEntity: nextProps.contracting_entity
    })
  }


  autoSetState = (newState) => {
    this.setState(newState)
    this.props.formSubmit()
  }

  render () {
    return(
      <div className="container-fluid">
        <section className="row ml-2 mr-2 mt-2">
          <article className="col-12 side-modal-form">
            <SelectInput
              header="Contracting Entity"
              name="contract[contracting_entity]"
              options={this.props.contracting_entity_opts}
              value={this.state.contracting_entity}
              userCanEdit={this.props.user_can_edit}
              multi={false}
              onChange={(e) => {
                this.autoSetState({contracting_entity: e.value})
              }}
              />
          </article>
        </section>
      </div>
    )
  }
}

我有另一个名为Stage的输入,它与ContractingEntity非常相似,但刷新页面后会显示其值:

<SelectInput
  header="Stage"
  name="contract[stage]"
  options={this.props.stage_opts}
  value={this.state.stage}
  userCanEdit={this.props.user_can_edit}
  multi={false}
  onChange={(e) => {
    this.autoSetState({stage: e.value})
  }}
  />
javascript reactjs
1个回答
1
投票

将在页面刷新时初始化React app状态。如果要在页面刷新后保留这些数据,则需要在localStorage中保留此类数据。这被认为是反应中的反模式,建议不要使用它,除非它变得必要。

我希望这能让你明白一切。

© www.soinside.com 2019 - 2024. All rights reserved.