在抽象级别上，您要做的是在您的状态中拥有一个组件数组，然后由DynamicComponent的呈现函数调用该数组。这个数组应该立即获得它的第一个SelectPicker组件，每次调用handleAdd时，您都会使用setState函数向数组中添加一个新的SelectPicker。您可以通过查找SelectPicker来获得每个新array.length组件的id。

除本问题外，以下执行部分的注释也将在下面的问题中讨论。

如果我想更新具有id:1的对象的name属性并同时添加新的对象到状态，那么

怎么办？

这可能是实现预期结果的一种可能的解决办法：

function DynamicComponent() {
  const [myState, setMyState] = useState([ 
    {name: null, id: '1'}
  const handleAdd = arrIdx => setMyState(prev => {
    const newArr = [...prev];
    prev[arrIdx]?.name = ">>>>----new name goes here---<<<<";
    return [
      ...newArr,
        name: null,
        id: (prev.length + 1).toString()
  return(
      {myState.map((item, idx) => (
        <SelectPicker
          onSelect={() => handleAdd(idx)}
          key={item.id}  
          value={item.name} 
          data={options}