Javascript 试图将状态值从子级传递到父级，获取的最大更新深度超出了错误

我有一个基于类的React组件，它接收一个对象数组，然后过滤该数组以返回一个新的对象数组，该数组的值与

name

元素的值匹配

我正在为子组件中的

name

元素设置值，并试图将该状态传递给父组件

我的问题是，我可以传递状态no problem，并且可以

console.log（）

更改，但是当我调用

this.setState（{name:value）}

时，我开始得到

超过的最大更新深度

错误，并且我没有出错的地方

我有一个示例，下面是我的组件：

父组件

import React from "react";
import "./styles.css";
import MenuButton from "./MenuButton";

const data = [
  {
    name: "Thing 1",
    groupName: "animals"
  },
  {
    name: "Thing 2",
    groupName: "animals"
  },
  {
    name: "Thing 3",
    groupName: "animals"
  },
  {
    name: "Person 1",
    groupName: "people"
  },
  {
    name: "Person 1",
    groupName: "people"
  },
  {
    name: "Person 1",
    groupName: "people"
  }
];

let newData = data.filter((obj) => obj.groupName === name);

console.log("NEW DATA: ", newData);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  state = { name: "" };

  handleNameChange = (value) => {
    console.log("PARENT VALUE: ", value);
    this.setState({ name: value });
  };

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <MenuButton handleNameChange={this.handleNameChange} />
      </div>
    );
  }
}

export default App;

import React, { useState } from "react";

const MenuButton = (props) => {
  const [name, setName] = useState("");
  props.handleNameChange(name);

  return (
    <div>
      <button
        value={"Animals"}
        onClick={(e) => setName(e.target.value)}
        style={{ marginRight: "25px" }}
      >
        Animals
      </button>
      <button value={"Person"} onClick={(e) => setName(e.target.value)}>
        Person
      </button>
      {console.log(name)}
    </div>
  );
};

export default MenuButton;

---

这是因为您正在调用

props.handleNameChange（name）在每次渲染时，它会再次渲染父对象，从而再次渲染子对象（在无限渲染循环中），只需在调用
props.handleNameChange（名称）的位置添加一个useEffect如下所示：

import React, { useState, useEffect } from "react";

const MenuButton = (props) => {
  const [name, setName] = useState("");

  useEffect(() => {
    props.handleNameChange(name);
  }, [name]);

  return (
    <div>
      <button
        value={"Animals"}
        onClick={(e) => setName(e.target.value)}
        style={{ marginRight: "25px" }}
      >
        Animals
      </button>
      <button value={"Person"} onClick={(e) => setName(e.target.value)}>
        Person
      </button>
      {console.log(name)}
    </div>
  );
};

export default MenuButton;

import React，{useState，useffect}来自“React”；
常量菜单按钮=（道具）=>{
const[name，setName]=useState（“”）；
useffect（（）=>{
道具.手柄名称变更（名称）；
}[姓名]；
返回(
setName（e.target.value）}
style={{marginRight:“25px”}
>
动物
setName（e.target.value）}>
人
{console.log（名称）}
);
};
导出默认菜单按钮；

这将仅在名称变量更改时运行
handleNameChange
函数，而不是每次

希望有帮助。
这是因为您正在调用props.handleNameChange（名称）在每次渲染时，它会再次渲染父对象，从而再次渲染子对象（在无限渲染循环中），只需在调用
props.handleNameChange（名称）的位置添加一个useEffect如下所示：

import React, { useState, useEffect } from "react";

const MenuButton = (props) => {
  const [name, setName] = useState("");

  useEffect(() => {
    props.handleNameChange(name);
  }, [name]);

  return (
    <div>
      <button
        value={"Animals"}
        onClick={(e) => setName(e.target.value)}
        style={{ marginRight: "25px" }}
      >
        Animals
      </button>
      <button value={"Person"} onClick={(e) => setName(e.target.value)}>
        Person
      </button>
      {console.log(name)}
    </div>
  );
};

export default MenuButton;

import React，{useState，useffect}来自“React”；
常量菜单按钮=（道具）=>{
const[name，setName]=useState（“”）；
useffect（（）=>{
道具.手柄名称变更（名称）；
}[姓名]；
返回(
setName（e.target.value）}
style={{marginRight:“25px”}
>
动物
setName（e.target.value）}>
人
{console.log（名称）}
);
};
导出默认菜单按钮；

这将仅在名称变量更改时运行
handleNameChange
函数，而不是每次

希望能有帮助