我正在探索反應onChange功能。我想做的功能是選中復選框時，我想更新本地資料以在未選中復選框時添加一些值，我只想填充原始資料，我的代碼似乎與我想要的相反. 任何可以提供一些指導？
密碼箱
import "./styles.css";
import { useState } from "react";
export default function App() {
const localData = [{ name: "apple", phone: 12345 }];
const [check, setCheck] = useState(false);
const [data, setData] = useState(localData);
const handleOnChange = () => {
setCheck(!check);
check ? setData([...data, { name: "amazon", phone: 222 }]) : setData(data);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<p>
<input type="checkbox" check onChange={handleOnChange}></input>
</p>
<p>{JSON.stringify(data)}</p>
</div>
);
}
uj5u.com熱心網友回復：
setCheck異步運行。所以在函式handleOnChange之后setCheck(!check)，check的值還沒有設定為新值。
data您可以在此處使用效果，因為您想要從更改更改的副作用check。這樣，只要check完成更改，效果就會觸發：
const handleOnChange = () => {
setCheck(!check);
};
useEffect(() => {
check &&
setData((previous) => [...previous, { name: "amazon", phone: 222 }]);
}, [check]);
更新沙盒：https ://codesandbox.io/s/quirky-rain-hmhkk
uj5u.com熱心網友回復：
不需要使用兩種狀態，當您想要添加更多選項時，該解決方案會給您帶來更多問題。
我會采用與此類似的方法：
import "./styles.css";
import { useState } from "react";
const localData = [{ name: "apple", phone: 12345 }];
const extraData = [{ name: "amazon", phone: 222 }];
export default function App() {
const [data, setData] = useState(localData);
const handleOnChange = (item) => {
if (!data.find(({ name }) => name === item.name)) setData([...data, item]);
else setData(data.filter(({ name }) => name !== item.name));
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<p>
{extraData.map((item) => {
return (
<input
key={item.name}
type="checkbox"
checked={data.includes(({ name }) => name === item.name)}
onChange={() => handleOnChange(item)}
/>
);
})}
</p>
<p>{JSON.stringify(data)}</p>
</div>
);
}
這將允許您在將來添加更多復選框。
uj5u.com熱心網友回復：
那么，您希望在data選中復選框時添加資料嗎？只需反轉您在中使用的三元的條件handleOnChange：
import "./styles.css";
import { useState } from "react";
export default function App() {
const localData = [{ name: "apple", phone: 12345 }];
const [check, setCheck] = useState(false);
const [data, setData] = useState(localData);
const handleOnChange = () => {
setCheck(!check);
!check ? setData([...data, { name: "amazon", phone: 222 }]) : setData(data);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<p>
<input type="checkbox" check onChange={handleOnChange}></input>
</p>
<p>{JSON.stringify(data)}</p>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/416310.html
標籤：
下一篇：將資料從類組件傳遞到功能組件