The React parent component infinitely brushes the data when passing values to the child component

recently I am learning react, and want to try to be a todo. But there was a problem when the parent component passed the value to the child component

parent App:

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      set:[{title:"",content:"",isOn:true}]
    }
    this.handleSave = this.handleSave.bind(this);
  }
  handleSave(set){
    this.setState({set:[set]})
  }
  render() {
    console.log("")
    return (
      <div className="App">
        <div className="App-header">
          <p className="App-title">Fidlcn"s Todo

</div> <div className="todoBox"> <Add onSave={this.handleSave} /> <Content states = {this.state} /> </div> </div> ); } }

Sub-component content:

class Content extends Component{
    constructor(props){
        super(props);
        this.state = { set:[this.props.states.set[0]]};
        this.handleBtnStatusChange = this.handleBtnStatusChange.bind(this);
    }
    
    shouldComponentUpdate(nextProps, nextState) {
        if( nextProps.states.set.title !== "undefined"){
            this.setState({set:[nextProps.states.set[0]]})
            console.log(nextProps.states)
            return true
        }
    }
    handleBtnStatusChange(e){
        console.log(e);
        console.log(this);
    }
    render(){
        return(
            <div  className="content">
                <ul className="ulList">
                {
                    this.state.set.map((item,i)=>{
                        let isOn = item.isOn;
                        return (
                            <li key={i}>
                                <span>{i+1}</span>
                                <div className="ulDiv">
                                    <h3>{item.title}</h3>
                                    {item.content}
                                </div>
                                <div className="ulBtn">
                                    {isOn ? (
                                        <input type="button" value="Y" />):(
                                        <input type="button" value="Y" disabled />
                                    )}
                                    <input type="button"  value="N" onClick={this.handleBtnStatusChange} />
                                </div>
                            </li>
                        )
                    })
                }
                </ul>
            </div>
        )
    }
}

Sub-component add:

import React from "react";
import { Button, Input } from "antd"
import "antd/dist/antd.css";
import "./common.css";
import "../App.css";

const { TextArea } = Input;

class Add extends React.Component{
    constructor(props){
        super(props);
        this.handleUpload = this.handleUpload.bind(this);
        this.handleSaveT = this.handleSaveT.bind(this);
        this.handleSaveC = this.handleSaveC.bind(this);
        this.state = {title:"",content:"",isOn:true};
    }
    handleSaveT(e){
        this.setState({title:e.target.value})
    }
    handleSaveC(e){
        this.setState({content:e.target.value});
        this.setState({isOn:true});
    }
    handleUpload(){
        this.props.onSave(this.state)
    }
    render(){
        console.log("add")
        return(
            <div className="Add">
                <h2>Todo</h2>
                <div className="inputArea">
                    <Input addonBefore="" onChange={this.handleSaveT} />
                    <TextArea rows={18} id="titleInput" placeholder="" onChange={this.handleSaveC} />
                </div>
                <Button type="primary" onClick={this.handleUpload}></Button>
            </div>
        )
    }
}

export default Add;

the idea is to input the value in add, click Button to pass the value to the parent component, and the parent group passes the value to the state of the child component content to trigger the update. But the actual situation is that the error will be reported when you click the button in add. You can see that the problem is that the parent component changes the content value, but does not know how to modify it (the figure does not know why it cannot be uploaded)

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    
  12 | 
  13 | shouldComponentUpdate(nextProps, nextState) {
  14 |     if( nextProps.states.set.title !== "undefined"){
> 15 |         this.setState({set:[nextProps.states.set[0]]})
  16 |         console.log(nextProps.states)
  17 |         return true
  18 |     }

Mar.04,2021

it's a mess.

shouldComponentUpdate(nextProps, nextState) {
  14 |     if( nextProps.states.set.title !== "undefined"){ // set
> 15 |         this.setState({set:[nextProps.states.set[0]]}) // set
  16 |         console.log(nextProps.states)
  17 |         return true
  18 |     }

and general component updates do not use shouldComponentUpdate,. This method is usually used to update manually when it is impossible to use the component mechanism to update automatically or in some special cases, the value passed directly through props, the parent changes, and the subset will automatically render,. The props value should not be managed by state again. Refer to the official tutorial:
https://reactjs.org/tutorial/.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb4c7a-24fe.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb4c7a-24fe.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?