Question

因此，我正在使用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})
  }}
  />

Answer 1

反应应用程序状态将在页面刷新时初始化。如果要在页面刷新后保留这些数据，则需要将其保留在localStorage中。将此视为反应中的反模式，建议除非必要，否则不要使用它。

我希望这对您来说很清楚。

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

1 个答案: