我正在嘗試在 React 中構建一個簡單的費用日志應用程式，并希望在每次expensesLog更新物件時顯示最新資料。單擊按鈕時，會呼叫該函式并更新物件，但盡管我映射了物件clickHandler，但 UI 上似乎沒有任何變化。expenseLog這是我的代碼：
import './App.css';
import { useState } from 'react';
function App() {
var expenseLog = [
{
name: "Expense1",
amount: 1000
},
{
name: "Expense2",
amount: 100
}
];
var [count, setCount] = useState(0);
var [name, setName] = useState("");
const inputChangeHandler = (e) => {
setName(e.target.value);
}
const inputChangeHandler2 = (e) => {
setCount(e.target.value);
}
const clickHandler = () => {
expenseLog = [...expenseLog, {name: name, amount: count}];
document.querySelector('.inputField').value = "";
document.querySelector('.inputField2').value = 0;
}
return (
<div className="App">
<input onChange={inputChangeHandler} className='inputField'/>
<input type={"number"} onChange={inputChangeHandler2} className='inputField2'/>
<button onClick={clickHandler}></button>
{expenseLog.map(expense => <p>{expense.name} {expense.amount}</p>)}
</div>
);
}
export default App;
uj5u.com熱心網友回復：
它不會更新 UI，因為費用日志只是物件，并且當您不更改參考時它是不可變的。
因此，您需要使用費用日志作為狀態變數。并使用 setExpenseLog 在回呼函式中更新它以更新狀態。
import "./App.css";
import { useState } from "react";
function App() {
const [expenseLog, setExpenseLog] = useState([
{
name: "Expense1",
amount: 1000,
},
{
name: "Expense2",
amount: 100,
},
];)
var [count, setCount] = useState(0);
var [name, setName] = useState("");
const inputChangeHandler = (e) => {
setName(e.target.value);
};
const inputChangeHandler2 = (e) => {
setCount(e.target.value);
};
const clickHandler = () => {
setExpenseLog(prev => [...prev,{ name: name, amount: count } ])
document.querySelector(".inputField").value = "";
document.querySelector(".inputField2").value = 0;
};
return (
<div className="App">
<input onChange={inputChangeHandler} className="inputField" />
<input
type={"number"}
onChange={inputChangeHandler2}
className="inputField2"
/>
<button onClick={clickHandler}></button>
{expenseLog.map((expense) => (
<p>
{expense.name} {expense.amount}
</p>
))}
</div>
);
}
export default App;
uj5u.com熱心網友回復：
你的變數expenseLog是在你的反應組件的函式體中定義的。這意味著 react 將在每次渲染時初始化變數，從而忘記你改變的所有狀態。
正如你對countand所做的那樣name，你需要包裹expensesLog到一個 ReactuseState鉤子中以維護組件內部的狀態。
uj5u.com熱心網友回復：
- 將資料添加到新
expenses狀態。 - 洗掉
count和name狀態，并添加一個input處理兩種輸入更改的新狀態。 - 為每個輸入添加一個資料屬性。我們可以使用它在
input狀態發生變化時更新它。 - 移除原生 DOM 方法。當您單擊按鈕時，重新初始化輸入狀態。狀態的變化將反映在輸入值中。
const { useState } = React;
function Example({ data }) {
const inputInit = { name: '', amount: 0 };
const [expenses, setExpenses] = useState(data);
const [input, setInput] = useState(inputInit);
function handleChange(e) {
const { dataset: { type }, value } = e.target;
setInput({ ...input, [type]: value });
}
function handleClick() {
const { name, amount } = input;
setExpenses([ ...expenses, { name, amount } ]);
setInput(inputInit);
}
return (
<div onChange={handleChange}>
Name: <input data-type="name" type="text" value={input.text}/>
Amount: <input data-type="amount" type="number" value={input.number} />
<button onClick={handleClick}>Add entry</button>
<div className="list">
{expenses.map(obj => {
return <p>{obj.name}: {obj.amount}</p>;
})}
</div>
</div>
);
}
const data=[{name:'Expense1',amount:13},{name:'Expense2',amount:100}];
ReactDOM.render(
<Example data={data} />,
document.getElementById('react')
);* { font-size: 0.95em; }
input { display: block; }
button { margin-top: 1em; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/478613.html
標籤：javascript 反应