狀態未在反應中更新
[英]state is not updated in react
問題描述
在給定的代碼示例中 sortItemsByEarliest 和 sortItemsByLatest 不能按我的意願工作。 對項目進行排序后狀態不會更新。
已經安慰了排序的輸出它在最新和最早中都是正確的
const rootElement = document.getElementById("root"); ReactDOM.render( < App / > , rootElement); function App() { const [items, setItems] = React.useState([]); const [start, setStart] = React.useState(""); const [end, setEnd] = React.useState(""); const [last_inserted_id, setLastInertedId] = React.useState(0); return ( <div> <div>{renderControlButton()}</div> <div>{renderList()}</div> </div> ); function renderControlButton() { function sortItemsByEarliest() { setItems(items.sort((a, b) => a.id - b.id)); } function sortItemsByLatest() { setItems(items.sort((a, b) => b.id - a.id)); } function addToStart() { setItems([{ todo: start, id: last_inserted_id + 1 }, ...items]); setStart(""); setLastInertedId(last_inserted_id + 1); } function addToEnd() { setItems([...items, { todo: end, id: last_inserted_id + 1 }]); setEnd(""); setLastInertedId(last_inserted_id + 1); } return ( <div> <div> <input value={start} onChange={e => setStart(e.target.value)} /> <button onClick={addToStart} type="button"> Add New Item to Start </button> <input value={end} onChange={e => setEnd(e.target.value)} /> <button onClick={addToEnd} type="button"> Add New Item to End </button> <button onClick={() => sortItemsByEarliest()} type="button"> Sort by Earliest </button> <button onClick={() => sortItemsByLatest()} type="button"> Sort by Latest </button> </div> <div /> </div> ); } function handleItemChange(value, index) { setItems([ ...items.slice(0, index), { id: items[index].id, todo: value }, ...items.slice(index + 1, items.length) ]); } function renderList() { return ( <div> {items.map((item, index) => { return ( <div key={index}> <span style={{ width: 200 }}> {item.id}.{item.todo} </span> <input onChange={e => { handleItemChange(e.target.value, index); }} value={item.todo} /> </div> ); })} </div> ); } }
<html> <head> <body> <div id='root'></div> </body> <script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.development.js"></script> </head> </html>
預期結果是當我單擊“按最早排序”按鈕時，我想按最早的順序顯示排序列表，並按最新輸入顯示“按最新排序”
1 個解決方案
解決方案1
2 已采納 2019-02-23 15:21:52
sort對數組進行就地sort ，這將使您嘗試使用相同的數組引用更新狀態。
您可以創建一個包含items所有元素的新數組並對其進行排序，它將按預期工作。
function sortItemsByEarliest() {
setItems([...items].sort((a, b) => a.id - b.id));
}
function sortItemsByLatest() {
setItems([...items].sort((a, b) => b.id - a.id));
}
function App() { const [items, setItems] = React.useState([]); const [start, setStart] = React.useState(""); const [end, setEnd] = React.useState(""); const [last_inserted_id, setLastInertedId] = React.useState(0); function sortItemsByEarliest() { setItems([...items].sort((a, b) => a.id - b.id)); } function sortItemsByLatest() { setItems([...items].sort((a, b) => b.id - a.id)); } function addToStart() { setItems([{ todo: start, id: last_inserted_id + 1 }, ...items]); setStart(""); setLastInertedId(last_inserted_id + 1); } function addToEnd() { setItems([...items, { todo: end, id: last_inserted_id + 1 }]); setEnd(""); setLastInertedId(last_inserted_id + 1); } function handleItemChange(value, index) { setItems([ ...items.slice(0, index), { id: items[index].id, todo: value }, ...items.slice(index + 1, items.length) ]); } return ( <div> <div> <div> <div> <input value={start} onChange={e => setStart(e.target.value)} /> <button onClick={addToStart} type="button"> Add New Item to Start </button> <input value={end} onChange={e => setEnd(e.target.value)} /> <button onClick={addToEnd} type="button"> Add New Item to End </button> <button onClick={() => sortItemsByEarliest()} type="button"> Sort by Earliest </button> <button onClick={() => sortItemsByLatest()} type="button"> Sort by Latest </button> </div> <div /> </div> </div> <div> <div> {items.map((item, index) => { return ( <div key={index}> <span style={{ width: 200 }}> {item.id}.{item.todo} </span> <input onChange={e => { handleItemChange(e.target.value, index); }} value={item.todo} /> </div> ); })} </div> </div> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>
反應-狀態未更新
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.