首頁猿問使用 useState 和...

使用 useState 和 React 的 TodoList - 更新 todoList 的問題

JavaScript

瀟湘沐 2022-07-15 10:17:22

我在使用 React 和 useState 更新我的 todoList 時遇到問題...我應該嘗試使用“推送”還是其他方式來更新我的列表？非常感謝您 ??！import React, { useState } from "react";const App = () => { // State search et sa fonction de modification const [search, setSearch] = useState(""); const updateSearch = (e) => { setSearch(e.target.value); console.log(search); }; // State de liste et sa fonction de modification const [list, setList] = useState([]); const updateList = () => { setList([...list, search]); }; return ( <div> <h1>Welcome on your todolist</h1> <br /> <input type="text" onChange={updateSearch} value={search} /> <button onClick={updateList}>enter</button> <ul></ul> </div> );};export default App;

查看完整描述

2 回答

慕森卡

TA貢獻1806條經驗獲得超8個贊

這是因為 useState 是異步的，如果您想在更新后記錄狀態，您可以使用 useEffect 掛鉤list作為依賴

項另外我想建議為列表的每個元素添加一個鍵，一種快速的方法是使用數組索引，像這樣：

{list.map((item,index) => (

))}

但是最好將您的列表作為對象列表[value,id]并在您將項目添加到列表時生成一個 uuid()

反對回復 2022-07-15

桃花長相依

TA貢獻1860條經驗獲得超8個贊

我將改寫我的問題：我再次處理我的代碼，一切似乎都正常，但是當我控制臺記錄數組列表時，數組第一個數組總是空的......

import React, { useState } from "react";

const App = () => {

// State search et sa fonction de modification

const [search, setSearch] = useState("");

const updateSearch = (e) => {

setSearch(e.target.value);

console.log(search);

};

// State de liste et sa fonction de modification

const [list, setList] = useState([]);

const updateList = () => {

setList([...list, search]);

setSearch("");

console.log(list);

};

return (

<div>

<h1>Welcome on your todolist</h1>

<br />

<button onClick={updateList}>enter</button>

<h1>what is inside of list : {list}</h1>

<ul>

{list.map((item) => (

))}

</ul>

</div>

);

};

export default App;

反對回復 2022-07-15

2 回答
0 關注
164 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 useState 和 React 的 TodoList - 更新 todoList 的問題

使用 useState 和 React 的 TodoList - 更新 todoList 的問題

2 回答

添加回答