试图将 state 值从子级传递给父级，得到最大更新深度超出错误

Question

I have a class based React component that receives an array of objects and then filters that array to return a new array of objects with values that match the value of a name element.

I'm setting the value for the name element from within a child component and trying to pass that piece of state up to the parent.

My issue is that I can pass the state no problem and can console.log() the changes, but when I call this.setState({ name: value )} I start getting the Maximum Update Depth Exceeded error and I'm not where I'm going wrong.

I have a Codesandbox for live example and here are my components:

Parent Component

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;

Child Component

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;

Answer 1

That's happening because you are calling props.handleNameChange(name); on every render, so it renders the parent again, that renders the child again (in a loop of infinite renders), just add a useEffect where you call props.handleNameChange(name); like this:

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;

This will only run the handleNameChange function when the name variable changes, not every time.

Hope it helps.