React 父組件向子組件傳值時無限刷數(shù)據(jù)

最近在學(xué)習(xí)react，想做一個todo試試。但是在父組件向子組件傳遞值的時候遇到了問題

父組件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</p>
        </div>
        <div className='todoBox'>
              <Add onSave={this.handleSave} />
              <Content states = {this.state} />
        </div>
      </div>
    );
  }
}

子組件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>
        )
    }
}

子組件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內(nèi)容添加</h2>
                <div className='inputArea'>
                    <Input addonBefore="標(biāo)題" onChange={this.handleSaveT} />
                    <TextArea rows={18} id='titleInput' placeholder='在此輸入內(nèi)容' onChange={this.handleSaveC} />
                </div>
                <Button type="primary" onClick={this.handleUpload}>添加</Button>
            </div>
        )
    }
}

export default Add;

想法是add里輸入值，點擊Button將值傳遞給父組件，父組將值傳遞給子組件content的state來觸發(fā)更新，但實際情況是點擊add里的button就會報錯，可以看出是父組件更改content值的問題，但不知道具體該怎么修改（圖不知道為什么沒法上傳）

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 |     }