React新手求助：无法向对象数组添加新对象并更新状态

问题原因 #

• Home组件中的items是普通常量，未通过React状态管理，所以即便Form组件内部更新了数组，Home的items不会发生变化，Cards组件始终接收初始值。
• Form组件自行维护的elements状态与Home的数据源完全独立，更新后无法同步到父组件，导致页面其他部分无法感知新数据。

解决步骤 #

1. 在Home组件中用useState管理items数组，确保状态变化能触发组件重渲染。
2. 给Form组件传递添加新项的回调函数，让Form提交时调用该函数更新Home的状态。
3. 移除Form组件中多余的elements状态，无需在子组件维护数据副本，直接通过回调把新数据传给父组件。
4. 去掉handleTitleChange和handleContentChange中的e.preventDefault()，这两个方法不需要阻止默认行为。

修改后的代码 #

Home组件

import { useState, Fragment } from 'react';
import Form from './Form';
import Cards from './Cards';

function Home(){
    const [items, setItems] = useState([{
        title:"Loops",
        content:"Its a iterative statement"
    }]);

    const addItem = (newItem) => {
        setItems(prevItems => [...prevItems, newItem]);
    }

    return(
        <Fragment >
            <Form onAddItem={addItem} />
            <Cards items={items}/>
        </Fragment>
    );
}

Form组件

import './form.css';
import { useState } from 'react';

function Form({ onAddItem }){
    const [title, setTitle] = useState("");
    const [content, setContent] = useState("");
   
    function Submit(e){
        e.preventDefault();
        onAddItem({ title, content });
        setTitle("");
        setContent("");
    }

    function handleTitleChange(e){
        setTitle(e.target.value);
    }

    function handleContentChange(e){
        setContent(e.target.value);
    }

    return(
        <form onSubmit={Submit}>
            <input type="text" onChange={handleTitleChange} value={title} placeholder="Title" />
            <textarea onChange={handleContentChange} value={content} placeholder="Take a note"/>
            <button type='submit'>+</button>
        </form>
    );
}

export default Form;

补充说明 #

• 现在数据的唯一数据源在Home组件的items状态中，Form仅负责收集输入并通知父组件添加新项，符合React单向数据流原则。
• 给输入框和textarea添加value属性，转为受控组件，确保输入值与状态完全同步。

内容的提问来源于stack exchange，提问作者Vimal Raj A C- 158