使用 React hooks 在 React 中添加 div

Question

我目前正在学习 React，正在制作一个待办事项应用程序，以便我可以更轻松地理解 React。所以这就是我正在尝试做的事情：

用户点击按钮
点击会触发提示，要求用户输入待办事项标题（目前只有标题）
然后，该标题被添加到所有待办事项的数组中
然后，使用该数组在页面上显示每个待办事项

代码：

const [check, setCheck] = useState(false);
const [todo, setTodo] = useState([]);

function handleClick() {
    let toAdd = prompt('Title: ')
    setTodo([...todo, {
        title: toAdd
    }]);
}

useEffect(()=> {
    if(todo.length !== 0) {
        setCheck(true);
    }
})

return (
    <div className="wholeContainer">
        <div className="tododiv">
            <span className="todos">Todos: </span>
            <hr/>
            {
                check ? 
                todo.forEach((eachTodo)=> {
                    <TodoItems title={eachTodo}/>
                })
                : <span>Nothing</span>
                    
            }
        </div>
        <button className="add" onClick={handleClick}>
        <i className="fas fa-plus"></i>
            Add a Todo
        </button>
    </div>
);

写const [check, setCheck] = useState(false);是为了让我可以访问数组if todo.length !== 0;

问题出在渲染部分。我想不出一种方法来在它们自己的 <TodoItems/> 组件中显示每个待办事项，而且在使用 forEach() 时也没有任何反应，因为我认为有人告诉我 setState() 有效异步地。我真的需要一些建议！

谢谢...

Answer 1

您正在使用

todo.forEach((eachTodo)=> {
  <TodoItems title={eachTodo}/>
})

什么时候应该使用

todo.map((eachTodo)=> {
  return <TodoItems title={eachTodo}/>
})

或

todo.map((eachTodo)=> (
  <TodoItems title={eachTodo}/>
))

你的组件中还有一个无限循环：

useEffect(()=> {
    if(todo.length !== 0) {
        setCheck(true);
    }
})

每次组件更新时，当待办事项列表不为空时，您将 Check 设置为 true，这会触发新的渲染。此外，您不需要为每个变量使用状态，只有那些是更改应该触发 re-render.

您的新 todo-list 状态也取决于之前的状态，因此您应该使用功能更新。

https://reactjs.org/docs/hooks-reference.html

const [todoList, setTodoList] = useState([]);

function handleClick() {
    let toAdd = prompt('Title: ');
    setTodoList((prevTodoList) => [...prevTodoList, toAdd]);
}

const isTodoListEmpty = todoList.length === 0
return (
    <div className="wholeContainer">
        <div className="tododiv">
            <span className="todos">Todos: </span>
            <hr />
            {!isTodoListEmpty ? (
                todoList.forEach((todoItem) => {
                    <TodoItems title={todoItem} />;
                })
            ) : (
                <span>Nothing</span>
            )}
        </div>
        <button className="add" onClick={handleClick}>
            <i className="fas fa-plus"></i>
            Add a Todo
        </button>
    </div>
);

使用 React hooks 在 React 中添加 div

Appending a div in React using React hooks

javascript

reactjs

react-state-management

react-hooks

react-state