react使用ant-design Tree组件使用treeData自定义title,给变量赋值后,却无法取得更新后的数据

Question

react hook+ant-design(4.x版本) Tree组件，在自定义的title里面增加了两个操作按钮，点击编辑时更新 name 变量，页面也成功渲染出更新后的数据，但是当点击增加按钮，打印 name 变量时，得到的数据却是空的，代码如下：

import React, {Component, useState, useEffect} from 'react'
import {Tree} from 'antd'
import { PlusSquareOutlined, EditOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons'

function Tab() {
  const data1 = [
    {
      value: 'Root',
      defaultValue: 'Root',
      key: '0-1',
      parentKey: '0',
      isEditable: false
    }
  ]

  const [data, setData] = useState(data1)
  const [name, setName] = useState('')

  const renderTreeNodes = data => data.map((item) => {
        if (item.isEditable) {
            item.title = (
                <div>
                    <CloseCircleOutlined style={{ marginLeft: 10 }} onClick={() => onClose(item.key, item.defaultValue)}/>
                    <CheckCircleOutlined style={{ marginLeft: 10 }} onClick={() => onSave(item.key)} />
                </div>
            );
        } else {
            item.title = (
                <div>
                    <span>
                        {item.value}
                    </span>
                    <span> 
                        <EditOutlined style={{ marginLeft: 10 }} onClick={() => onEdit(item.key)}/>
                        <PlusSquareOutlined style={{ marginLeft: 10 }} onClick={() => onAdd(item.key)}/>
                    </span>
                </div>
            )
        }

        if (item.children) {
          renderTreeNodes(item.children);
        }
        return item;
    })

    useEffect(() => {
      renderTreeNodes(data)
    }, [])


  const onAdd = (e) => {
    // 此处打印 name 时无法打印出 name 的值
    console.log('name:', name)
  }

  const onEdit = (key) => {
    console.log('edit');
    // 此处给 name 变量赋值
    setName('12343')
  }
  const onClose = () =>{}
  const onSave = () => {}

  return (
    <div>
      <Tree treeData={data}></Tree>
      {/* 点击编辑按钮后，此处有渲染出来 */}
      <div>{name}</div>
    </div>
  )
}

export default Tab;

有没有小伙伴帮忙看下，是因为什么？

Answer 1

等待大神解答