TextArea、Input与useEffect更改数组与对象里的值

TextArea与Input.jsx

import React, { Component, useState, useEffect } from 'react'
import { Modal, Input } from 'antd'

const { TextArea } = Input;

export default class CompanyAuto extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [{
                detail_text: 'xxx1'
            },{
                detail_text: 'xxx2'
            }],
            obj: {
                age: "18"
            }
        }
    }

    confirmText = (val, idx) => {
        const { list } = this.state
        /**
         * 更改数组里的值
         */
        const newPersons = list.concat([]);   //复制数组--浅拷贝
        newPersons[idx]["detail_text"] = val
        this.setState({
            ...this.state,
            list: newPersons
        }, () => {
            console.log('this.state',this.state)
        })


        return
        /**
         * 更改数组与对象里的值
         */
        const listData = [...list];   //复制数组--浅拷贝
        const nObj = Object.assign({}, this.state.obj, { age: val });

        this.setState({
            list: listData.map((item, index) => index === idx ? {
                ...item,
                detail_text: val    //更改的值
            } : item),
            obj: nObj
        }, () => {
            console.log('this.state',this.state)
        })
    }

    render() {
        const { list } = this.state
        return (
            <div>
                {list.map((ele, idx) => (
                    <TextAreaBox detail_text={ele.detail_text} confirmText={(val) => this.confirmText(val, idx)}/>
                ))}
            </div>
        )
    }
}


const TextAreaBox = (props) => {
    const { detail_text } = props
    
    const [detailText, setDetailText] = useState(detail_text);

    // useEffect  在 React 更新 DOM 之后运行一些额外的代码。比如发送实时更新的网络请求（输入搜索）
    useEffect(() => {
        console.log('detailText', detailText)
    })
    // useEffect(() => {}, [detailText]); // 仅在 detailText 更改时更新

    const textAreaBlur = (e) => {
        Modal.confirm({
            content: '确定要修改吗?',
            type: 'warning',
            onOk: () => {
                props.confirmText(detailText)
            },
            onCancel: () => {
                setDetailText(detail_text)
            }
        })
    }

    const textAreaChange = ({ target: { value } }) => {
        setDetailText(value)
    }

    return (
        <div>
            <TextArea placeholder="列表里更改input数据" autoSize={{ minRows: 3, maxRows: 5 }} value={detailText}
            onChange={textAreaChange} onBlur={textAreaBlur}/>
        </div>
    )
}