Question

我正在尝试对datepicker进行更改，但是状态不会更新。我正在使用道具的状态。因此日期已经存在。它显示过期日期。当我进行变更时，它会卡在当前日期。

onChange处理程序中缺少什么？

  constructor(props) {
    super(props);

    const {export} = this.props;
    this.state = {showCalender: false};
    this.date = export.expires;

    this.handleChange = this.handleChange.bind(this);
  }

  static getDerivedStateFromProps(props, state) {
    if (props.export.expires !== state.expires) {
      return {
        expires: props.export.expires
      };
    }
    return null;
  }

  handleChange(date) {
    this.setState({
      expires: date
    }, console.log(this.state.expires));
    this.handleClick();
  }

  handleClick() {
    this.setState({showCalender: !this.state.showCalender});
  }

  handleClear() {
    this.setState({expires: ''});
  }

  render() {
    const {expires, showCalender} = this.state;
    const expiresDate = format(expires, 'MM/dd/yyyy');

    return (
        <div>
          <FormGroup>
            <FormControl
              id="date"
              value={expiresDate}
              onChange={this.handleChange}
              onClick={() => this.handleClick()}
              title="set date"
              aria-label="set date"
            />
            <Button className="close-btn" onClick={() => this.handleClear()}>Clear</Button>
          </FormGroup>
          { showCalender && (
            <FormGroup>
              <DatePicker
                selected={expires}
                onChange={this.handleChange}
                inline
              />
            </FormGroup>
          )}
      </div>
    );
  }

Answer 1

更新状态时，您将触发重新渲染，但在下一次渲染之前，react调用了getDerivedStateFromProps，您正在检查其中的值是否不同：

static getDerivedStateFromProps(props, state) {
    if (props.export.expires !== state.expires) {
      return {
        expires: props.export.expires
      };
    }
    return null;
  }

它们与您刚刚更新的state相同，但是props保持不变。然后再次更新状态，但现在将其设置回props中的值。

来自DOCS：

在初始安装和后续更新中，
getDerivedStateFromProps都在调用render方法之前被调用。

我不确定您为什么要尝试同步道具和状态，但这通常表明您的应用程序设计不良。

如注释中所述，自ES2015开始，请勿使用名为export的变量作为保留字。

您可能会收到以下错误：

意外的关键字“导出”

反应：react-datepicker不会更新状态

1 个答案: