动态生成多个 React createRef

有这么个需求，从接口获取数据，数据格式为：

/**
 * dataList - 接口获取的数据
 * tableData - 表格数据
 */
const dataList = [[tableData1], [tableData2], [tableData3], ...]

需要实现的效果大概长这样：

dataList 数组长度不固定，tableData 数组长度也不固定，需要在同一个弹窗中遍历出多个表格，每个表格对应一个 tableData 的数据，每个 tableData 中的数据可以被编辑，还可以对 tableData 做新增一条新数据的操作。因为修改数据后需要通过 table 组件中的 setState 来触发页面重新渲染，所以我的做法是给 Table 组件增加了一个 onChangeData 的方法给父组件调用，用以触发子组件（Table 组件）的 setState。

因为 dataList 是从接口获取的且长度不固定，想要做到的是按获取到的数据长度动态生成对应数量的 table 以及动态生成对应数量的 tableRef，以便在修改 table 数据时，能够根据下标找到对应的 tableRef 来调用组件中的 onChangeData。

整个结构及过程大概是这样：

// Table 组件
class Table extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            currentData: props.currentData || []
        }
    }

    onChangeData = (currentData) => {
        this.setState({ currentData })
    }

    render() {
        return <Table data={ this.state.currentData } ></Table>
    }
}

// 父组件调用
function Farther (props) {
    const [dataList, setDataList] = useState([])
    const [tableRefList, setTableRefList] = useState([])

    useEffect(() => {
        // ...此处省略接口获取dataList步骤，resDataList 为接口获取的数据
        const resDataList = [[tableData1], [tableData2], [tableData3], ...]
        // arr 为临时存放 tableRef 的数组
        const arr = []
        resDataList.forEach(item => {
            arr.push(React.createRef())
        })
        setDataList(resDataList)
        setTableRefList(arr)
    })
    
    // 编辑、新增
    const modify = () => {
        // targetIndex 为根据唯一标识在 dataList 中找到的对应 tableList 的下标
        const targetIndex = dataList.findIndex(item => {
            return xxx === item.xxx
        })
        // newDataList 为经过一系列编辑或者新增操作的新数据，对应旧数据为 dataList
        const newDataList = [newDataList]
        if (targetIndex > -1) {
            tableRefList[targetIndex].current.onChangeData(newDataList[targetIndex])
        }
    }
    
    return (<Popup visible={ visible }>
        { dataList && dataList.map((item, index) => <Table
            currentData={ item }
            ref={ tableRefList[index] }
        />) }
    </Popup>)
}

也许有其他更好的做法，但我目前只想到这个，并且足以实现当前的需求，有更好的做法欢迎讨论~！！