setState是否在此React代码中一次又一次地运行？

Question

我创建了三个React组件，但我不知道为什么收到无限网络请求和以下警告：index.js：1375警告：在现有状态转换（例如在render内）期间无法更新。 渲染方法应该纯粹是props和state的函数。 在App的MenuCategory（在App.js：19）中（在src / index.js：5）

MenuItems.js中的网络请求也被循环调用。 我认为这是由于setState造成的，但我不知道错误在哪里。 这是我的代码：

import React from "react";
import MenuCategory from "./components/MenuCategory";
import MenuItems from "./components/MenuItems";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { shortName: "" };
  }
  handleProps = ss => {
    if (this.state.shortName === "") {
      this.setState({ shortName: ss });
    }
    // console.log(ss, ".../PP");
  };
  render() {
    return (
      <div className="App">
        <MenuCategory callback={this.handleProps} />
        <MenuItems shortNameProp={this.state.shortName} />
      </div>
    );
  }
}

export default App;

import React from "react";

class MenuCategory extends React.Component {
  constructor(props) {
    super(props);
    this.state = { category: "", selectedCat: "" };
  }
  async UNSAFE_componentWillMount() {
    const url = "http://stream-restaurant-menu-svc.herokuapp.com/category";
    await fetch(url)
      .then(data => data.json())
      .then(element => {
        this.setState({ category: element });
      });
  }

  menuCat = () => {
    let cat = this.state.category;
    // console.log(cat, "...Cat", this.state.selectedCat, "...Cat");

    if (this.state.selectedCat !== "") {
      this.props.callback(this.state.selectedCat);
    }

    return cat.map(items => {
      return (
        <li
          key={items.short_name}
          onClick={() => this.setState({ selectedCat: items.short_name })}
        >
          {items.name}
        </li>
      );
    });
  };
  render() {
    return <div>{this.state.category.length > 0 ? this.menuCat() : null}</div>;
  }
}
export default MenuCategory;

import React from "react";

class MenuItems extends React.Component {
  constructor(props) {
    super(props);
    this.state = { catItems: "", items: "" };
  }
  renderItems = () => {
    let shortName = this.props.shortNameProp;
    if (shortName !== "") {
      const url =
        "https://stream-restaurant-menu-svc.herokuapp.com/item?category=" +
        shortName;
      fetch(url)
        .then(data => data.json())
        .then(element => {
          this.setState({ items: element });
        });
    }
    if (this.state.items !== "") {
      let selectedMenu = this.state.items;
      console.log(selectedMenu);

      return selectedMenu.map(item => {
        return <div key={item.name}> {item.name}</div>;
      });
    }
  };
  render() {
    return <div>{this.renderItems()}</div>;
  }
}
export default MenuItems;

Answer 1

让我们将App称为父母，将MenuCategory称为孩子。
让我们将函数调用表示为'->'符号。

这样形成一个无限循环：

child.render -> child.menuCat -> child.props.callback -> parent.handleProps -> parent.setState -> parent.render -> child.render