在路由参数更改时渲染反应类组件

Question

我以前只使用功能组件，所以我遇到了类组件生命周期的问题。 当参数 id 更改时，我需要重新渲染类。我可以使用 history.push(home/items/${id}) 更改参数 ID，但是随着路由的更改，页面不会重新呈现。

const getItems = () => {
      client
        .query({
          query: GET_ITEMS,
        })
        .then((result) =>
          this.setState({ items: result.data.items })
        );
    };

componentDidMount() {
    let { type } = this.props.match.params;
    this.setState({ type });

   getItems();
  }

componentDidUpdate(prevState) {
    let { type } = this.props.match.params;
    if (type !== prevState.type) {
      this.setState({ type });
    }
  }

render() {
    const { type } = this.props.match.params;

    return (
      <ul className={stl.list}>
            {this.state.items?.map(({ name }) => (
              <div>
                <li
                  style={this.state.type === name ? activeTabStyle : {}}
                  onClick={() => this.handleTabClick(name)}
                >
                  {name}
                </li>
                {this.state.type === name && <div className={stl.underline}></div>}
              </div>
            ))}
          </ul>
    );
  }

我尝试使用 componentDidUpdate，我认为它是 useEffect(() => {}, [dependants]) 的正确等价物，但它给了我一个错误，说达到了最大限制

我包含了给出错误Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. 的 componentDidUpdate 我的 componentDidUpdate 函数可能是错误的，因为我需要根据参数 id 而不是 prevState、prevProps 重新渲染。所以我尝试将参数 id 设置为 state 并使用 componentDidUpdate。

Answer 1

查看docs 以获得componentDidUpdate。您将第一个参数命名为 prevState，但第一个参数是先前的道具。您正在尝试将不存在的先前道具与当前道具进行比较，然后设置不更改先前道具的状态。这会导致无限循环。

试试这个：

componentDidUpdate(prevProps, prevState) {
  const { type } = this.props.match.params;
  if (type !== prevState.type) {
    this.setState({ type });
  }
}

考虑切换到 typescript，这些错误会立即在您的编辑器中突出显示。

请注意you probably don't need to derive state from props。您可以改为实现shouldComponentUpdate。