Javascript 使用挂钩将状态提升到React应用程序中的主要组件

我正在学习reactjs，并尝试实现一些小事情以供练习。想法很简单，将记录（

feedbackTasks

）添加到数据库并列出这些记录（第一次加载页面时，以及稍后添加新记录时）。请看下图

主要组件是

ManageFeedbackTasks

。我将

feedbackTask

项列表保持在其状态（

st_feedbackTaskList

）。此列表的更新通过

add_to_st_feedbackTask

功能执行。如果第一次生成此列表，则所有提取的数据（来自

PrintFeedbackTasks

组件）都将设置为

st\u feedbackTaskList

。如果不是，则列表中只插入添加的项目（来自

ShowAddingFeedbackTaskForm

）

export function ManageFeedbackTasks() {
    const [st_feedbackTaskList, setFeedbackTaskList] = useState([]);

    const add_to_st_feedbackTask = (data) => {

        if (st_feedbackTaskList.length == 0) {
            setFeedbackTaskList(data);
        } else {
            const { id, title, description } = data;
            setFeedbackTaskList([...st_feedbackTaskList, { id, title, description }]);
        }
    }

    return (
        <>
            <ShowAddingFeedbackTaskForm onAddingItem={add_to_st_feedbackTask} />
            <PrintFeedbackTasks onListingFeedbackTasks={add_to_st_feedbackTask} feedbackTasks={st_feedbackTaskList} />
        </>
    );
}

下面的组件显示添加表单并处理表单提交。添加新项目时，使用

props.onAddingItem

再次将此新项目发送回主组件

const ShowAddingFeedbackTaskForm = (props) => {
    const [st_title, setTitle] = useState('');
    const [st_description, setDescription] = useState('');

    const handleSubmit = async (event) => {
        event.preventDefault();
        await axios(...)
        .then(function (response) {
                setTitle('');
                setDescription('');

            //This will update the list of the feedback task in the main component
                props.onAddingItem({
                   id: response.data,
                   title: st_title,
                   description: st_description
                });

            //GET THE ID HERE
            console.log(response.data);

        }).catch(function (error) {
            console.log(error);
        });
    }


    return (
        <form onSubmit={handleSubmit}>
            <input
                placeholder="Title..."
                type="text"
                value={st_title}
                onChange={(event) => setTitle(event.target.value)}
            />
            <input
                placeholder="Description..."
                type="text"
                value={st_description}
                onChange={(event) => setDescription(event.target.value)}
            />
            <button>Add Feedback Task</button>
        </form>
    );
}

const ShowAddingFeedbackTaskForm=（道具）=>{
常量[st_title，setTitle]=使用状态（“”）；
常量[st_description，setDescription]=使用状态（“”）；
const handleSubmit=async（事件）=>{
event.preventDefault（）；
等待axios（…）
.然后（功能（响应）{
片名（“”）；
setDescription（“”）；
//这将更新主组件中的反馈任务列表
道具({
id:response.data，
书名：圣徒书名，
描述：st_描述
});
//在这里拿到身份证
console.log（response.data）；
}).catch（函数（错误）{
console.log（错误）；
});
}
返回(
setTitle（event.target.value）}
/>
setDescription（event.target.value）}
/>
添加反馈任务
);
}

---

我想知道这种提升和管理国家的方式是否稳健。有什么改进代码的建议吗？此外，我想知道是否应该将这些组件放在它们自己的页面中（例如，一个页面或添加一条记录，另一个用于列表）。这在

react

世界中是否更有意义？

将状态提升到父级的想法是正确的。然而，由于您的代码结构，您可能会导致大量的重新渲染，并且可以在解决方案中进行一些性能优化。还有一件事是，您不应该在

PrintFeedbackTasks

组件中获取反馈任务，而应该在父组件中进行。另外，useEffect接受第二个参数，您可以使用该参数在初始装载时执行它

您也可以使用

useCallback

hook来记忆函数

管理反馈任务

export function ManageFeedbackTasks() {
    const [st_feedbackTaskList, setFeedbackTaskList] = useState([]);

    const fetchFeedbackTasks = useCallback(() => {
        axios.get('api/FeedbackTask/Index')
            .then(response => props.onListingFeedbackTasks(response.data))
            .catch(error => console.log(error));
    }, []);    

    useEffect(() => {
        fetchFeedbackTasks();
    }, []);

    const add_to_st_feedbackTask = useCallback((data) => {

        setFeedbackTaskList(prevTaskList => {
          if (prevTaskList.length == 0) {
            return data;
          } else {
            const { id, title, description } = data;
            return [...prevTaskList, { id, title, description }];
          }
        });
    }, [])

    return (
        <>
            <ShowAddingFeedbackTaskForm onAddingItem={add_to_st_feedbackTask} />
            <PrintFeedbackTasks onListingFeedbackTasks={add_to_st_feedbackTask} feedbackTasks={st_feedbackTaskList} />
        </>
    );
}

const PrintFeedbackTasks = (props) => {    

    return (
        <React.Fragment>
           {
                props.feedbackTasks.map(taskItem =>....
           }
        </React.Fragment>
    );
}

导出函数ManageFeedbackTasks（）{
const[st_feedbackTaskList，setFeedbackTaskList]=useState（[]）；
const fetchFeedbackTasks=useCallback（（）=>{
get（'api/FeedbackTask/Index'）
.then（response=>props.onListingFeedbackTasks（response.data））
.catch（错误=>console.log（错误））；
}, []);    
useffect（（）=>{
fetchFeedbackTasks（）；
}, []);
const add_to_st_feedbackTask=useCallback（（数据）=>{
setFeedbackTaskList（prevTaskList=>{
如果（prevTaskList.length==0）{
返回数据；
}否则{
常量{id，title，description}=数据；
返回[…prevTaskList，{id，title，description}]；
}
});
}, [])
返回(
);
}

打印反馈任务

export function ManageFeedbackTasks() {
    const [st_feedbackTaskList, setFeedbackTaskList] = useState([]);

    const fetchFeedbackTasks = useCallback(() => {
        axios.get('api/FeedbackTask/Index')
            .then(response => props.onListingFeedbackTasks(response.data))
            .catch(error => console.log(error));
    }, []);    

    useEffect(() => {
        fetchFeedbackTasks();
    }, []);

    const add_to_st_feedbackTask = useCallback((data) => {

        setFeedbackTaskList(prevTaskList => {
          if (prevTaskList.length == 0) {
            return data;
          } else {
            const { id, title, description } = data;
            return [...prevTaskList, { id, title, description }];
          }
        });
    }, [])

    return (
        <>
            <ShowAddingFeedbackTaskForm onAddingItem={add_to_st_feedbackTask} />
            <PrintFeedbackTasks onListingFeedbackTasks={add_to_st_feedbackTask} feedbackTasks={st_feedbackTaskList} />
        </>
    );
}

const PrintFeedbackTasks = (props) => {    

    return (
        <React.Fragment>
           {
                props.feedbackTasks.map(taskItem =>....
           }
        </React.Fragment>
    );
}

constprintfeedbacktasks=（props）=>{
返回(
{
props.feedbackTasks.map（taskItem=>。。。。
}
);
}

就拆分显示和更新任务列表的想法而言，这是一个产品决策，可以根据用户需要一次填写的字段列表的长度来决定