如何在 State 中将对象附加到现有对象并在 REACT 中呈现？

Question

let intialData = {
    person: {
     name: 'George',
     age: '21'
    }
   }
const [data, setData] = useState(intialData)

useEffect(() => {
    for (let i = Object.values(data).length + 1; i <= 3; i++) {
      setData([
        ...Object.values(data),
        {
          person: {
            name: '',
            age: ''
          }
        },
      ])
    }
  },[data])

我使用 initialData 在 HTML 中创建了包含两个字段 Name 和 Age 的表单。

{name:'George', age: '21'}

但它却创造了

[{name: '', age: ''},
{name: '', age: ''},
{name: '', age: ''}]

但我需要像下面这样创建

[{name: 'George', age: '21'},
{name: '', age: ''},
{name: '', age: ''}]

使用上面的代码，最初它呈现空字段，但在我单击或键入 initialData 后启动。如何从第一次加载开始使用 initialData 呈现。

Answer 1

关注结构：

如果有人物对象数组：

person: {
 name: 'George',
 age: '21'
}

然后应将与您的类型相匹配的数据展平 - 以避免人员重复：

let person = {
     name: 'George',
     age: '21'
   }

useEffect(() => {
    for (let i = Object.values(data).length + 1; i <= 2; i++) {
      setPeople([...Object.values(data),
        {
            name: '',
            age: ''
        },
      ])
     setPeople([...people, person]);
    }
  },[data])

如何在 State 中将对象附加到现有对象并在 REACT 中呈现？

How to append object with existing object in State and render in REACT?

json

reactjs

use-state