Question

我试图创建一个组件，显示一个选项供用户确认或更改为上一个/下一个选项。此组件已分配给路径：

/choose?option=1

查询＆＃34;选项＆＃34;是显示的选项，然后单击＆＃34; next＆＃34;会将此查询更改为＆＃34; option = 2＆＃34;。

要读取查询并将其分配给状态非常简单（使用ES6 +）：

componentWillMount() {
  const { query } = this.props.location;
  this.setState({
    option: query.option ? Number.parseInt(query.option, 10) : 1,
  });
}

我还提出了一种方法来将位置替换为路由器，更新URL而不创建新的历史状态，这是所需的行为：

setOption = (newOption) => {
  const newLocation = Object.assign(this.props.location, {
    query: {
      option: newOption,
    },
  });

  this.context.router.replace(newLocation);
};

问题：

当我将此位置推送到路由器时，它会重新呈现我的组件，并且更新渲染方法内的状态不是一个好主意。我可以放弃使用状态，只使用查询参数，但我不喜欢这个选项。

是否有（优雅）方法将这些查询参数绑定到组件状态？

Answer 1

找到一种方法可以做到：

  componentWillMount() {
    // Triggered when component is created
    this.updateState(this.props);
  }

  componentWillReceiveProps(nextProps) {
    // Triggered when router updates location
    this.updateState(nextProps);
  }

  setOption = (newOption) => {
    const newLocation = Object.assign(this.props.location, {
      query: {
        option: newOption,
      },
    });

    this.context.router.replace(newLocation);
  };

  updateState = (props) => {
    const { query } = props.location;
    this.setState({
      option: query.option ? Number.parseInt(query.option, 10) : 1,
    });
  };

我很感激建议：）

将React Router查询绑定到组件状态

1 个答案: