React 父组件向子组件传值时无限刷数据

Question

最近在学习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内容添加</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;

想法是add里输入值，点击Button将值传递给父组件，父组将值传递给子组件content的state来触发更新，但实际情况是点击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 |     }

Answer 1

写的很乱啊

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

而且一般的组件更新并不使用shouldComponentUpdate,这个方法通常用在无法利用组件机制自动更新或某些特殊情况时，手动更新的，直接通过props传过来的值，父级改变，子集也会自动render,不应该把props值重新用state管理，参考下官方给教程：
https://reactjs.org/tutorial/...