新用户输入后重新渲染页面

Question

作为这个问题的序言，我的反应经验相当初级。我目前正在尝试构建一个“待办事项”列表，该列表在创建“待办事项”时具有多个输入。因此，用户将输入他们的待办事项、他们对项目的描述、紧迫性和日期。我正在使用钩子将每个输入保存到状态，我的思考过程是然后将每个值推送到数组中。然后我会将该数组作为道具传递给我的待办事项列表组件，然后映射到每个数组。我的问题是，当我尝试添加新输入时，我调用的组件没有更新，并且仍然显示我放入的唯一一项。任何建议将不胜感激！

另外，如果有人对点击提交后清除输入字段有任何想法，那就太好了，谢谢！

首页

import React, { useState } from 'react';
import Todo from '../TodoList/Todo';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

const Home = () => {
    const [dateValue, onChangeDate] = useState(new Date());
    const [todo, setTodo] = useState('');
    const [description, setDescription] = useState('');
    const [urgency, setUrgency] = useState('');
    const [showList, setShowList] = useState(false);
    const [todoArray, setTodoArray] = useState([]);
    const [descriptionArray, setDescriptionArray] = useState([]);
    const [urgencyArray, setUrgencyArray] = useState([]);

    const todoOnChangeHandler = (event) => {
        setTodo(event.target.value);
    };
    const descriptionOnChangeHandler = (event) => {
        setDescription(event.target.value);
    };
    const urgencyOnChangeHandler = (event) => {
        setUrgency(event.target.value);
    };

    const onSubmit = (event) => {
        event.preventDefault();
        setShowList(true);
        todoArray.push(todo);
        descriptionArray.push(description);
        urgencyArray.push(urgency);
        componentDidMount()
    };

    return (
        <div>
            <header> Task Buddy </header>
            <div>
                <form onSubmit={onSubmit}>
                    <label>
                        {' '}
                        To-Do:
                        <input type='text' name='task' onChange={todoOnChangeHandler} />
                    </label>
                    <label>
                        {' '}
                        Description:{' '}
                        <input
                            type='text'
                            name='description'
                            onChange={descriptionOnChangeHandler}
                        />
                    </label>
                    <label onChange={urgencyOnChangeHandler}>
                        Urgency:
                        <select>
                            <option> High </option>
                            <option> Medium</option>
                            <option> Low</option>
                        </select>
                    </label>
                    <label>
                        Date: <Calendar onChange={onChangeDate} value={dateValue} />
                    </label>
                    <input type='submit' value='Submit' />
                </form>
                {showList && (
                    <div>
                        <Todo
                            todoArray={todoArray}
                            descriptionArray={descriptionArray}
                            urgencyArray={urgencyArray}
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

export default Home;

待办事项

import React from 'react';
import './Todo.css';

const Todo = (props) => {
    return (
        <div className='listContainer'>
            {props.todoArray.map((x, index) => {
                return (
                    <div>
                        {' '}
                        {x} + {index}{' '}
                    </div>
                );
            })}
            {props.descriptionArray.map((y, index) => {
                return (
                    <div>
                        {' '}
                        {y} + {index}{' '}
                    </div>
                );
            })}
        </div>
    );
};

export default Todo;

Answer 1

尝试在 onSubmit 函数中将 todoArray.push(todo) 更改为 setTodoArray([...todoArray, todo])。 descriptionArray 和 urgencyArray 也是如此。