當 state 更改時如何不渲染組件

Question

我有一個簡單的 Todo 應用程序。

任務數組位於 APP 組件中並相應地更改了幾次：通過添加和編輯。 當我編輯任務時，數組會發生變化，這會重新運行 APP 和其中的所有代碼。 我想避免這種情況並且不呈現 APP。 這是不必要的，因為我已經在渲染顯示我的任務的列表。

我應該采取的最佳方法是什么？

應用程序

export default function App() {

  const [todoArr, setTodoArr] = useState(getTasksFromLs())

....

我在任務組件中編輯任務的位置

   const editTask = (e, id) => {
        e.preventDefault()
        setTodoArr(todoArr.map((task) => task.id !== id ?
            task
            :
            { ...task, texst: inpValue }
        ))

        setedit(prev => !prev)
        let LS_task = JSON.parse(localStorage.getItem(id))
        LS_task.texst = inpValue
        localStorage.setItem(id, JSON.stringify(LS_task))
    }

Answer 1

您可以嘗試將 state 設置回它已有的位置。 只是下面給出的一個例子-

import React, {useState} from "react";

const App = ()=>{
const [stateChange, setStateChage] = useState("false")
const [changeText, setChangeText] = useState("")
const
const handleClick(e)=>{
setStateChange("true");
setChangeText(e.target.value);
setStateChange("false");
}

return(
<div>
<input type="text" onChange={setChangeText(e.target.value)} placeholder="text"></input>
<span>{changeText}</span>
<input type="submit" onclick="()=>handleClick()">Submit</submit>
</div>
)

}

如上所示，我只是想向您展示一個示例，您可以使用 function 在退出前更改 state。

如果您仍然遇到錯誤，只需與代碼共享一個沙箱鏈接。 我試着幫助你。