我将数据从子组件传递到应用程序(父)组件,并在应用程序组件中使用状态将此数据添加到现有数组中。当我console.log这个数组时,它似乎总是落后一种状态。例如,当我按下将数据从子组件传递到应用程序组件的按钮时,日志显示为:
[]
但是当我在子组件中再次按下带有新数据的按钮时,console.log 显示的是我第一次按下时的数据,而不是第二次按下的新数据,似乎后面有一个状态更改。
代码如下。当我传递子组件底部的“添加项目”按钮时,它会通过 foodItemToApp 函数将食物数据传递到 App 组件,该函数作为 props 传递到 FoodConsumation 组件。一旦数据位于 App 组件中,在同一函数 foodItemToApp 中,我通过 setFoodConsumedList() 状态将其添加到 ConsumerFoodList 中。之后,我控制台记录它,这就是我遇到问题的地方。
儿童组件-食物消费
import { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
function FoodConsumption(props) {
const [show, setShow] = useState(false);
const [foodItem, setFoodItem] = useState("");
const [proteinContent, setProteinContent] = useState("");
const [servings, setServings] = useState("");
const handleClose = () => setShow(false);
function submitHandler() {
console.log("Submitted");
setShow(false);
const newFoodItem = {
foodItem: foodItem,
proteinContent: proteinContent,
servings: servings,
};
console.log(newFoodItem);
props.childToParent(newFoodItem);
}
function addFoodItemHandler() {
setShow(true);
setFoodItem("");
setProteinContent("");
setServings("");
}
function foodHandler(event) {
setFoodItem(event.target.value);
}
function proteinContentHandler(event) {
setProteinContent(event.target.value);
}
function servingsHandler(event) {
setServings(event.target.value);
}
return (
<>
<Button variant="primary" onClick={addFoodItemHandler}>
Add item
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>What did you eat?</Modal.Title>
</Modal.Header>
<Modal.Body>
<form>
<ol>
<li>
<label>What did you eat?</label>
<input
type="text"
value={foodItem}
onChange={foodHandler}
></input>
</li>
<li>
<label>How many grams of protein?</label>
<input
type="text"
value={proteinContent}
onChange={proteinContentHandler}
></input>
</li>
<li>
<label>How many servings?</label>
<input
type="text"
value={servings}
onChange={servingsHandler}
></input>
</li>
</ol>
</form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={submitHandler}>
Add item
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default FoodConsumption;
应用程序组件
import "bootstrap/dist/css/bootstrap.min.css";
import DailyRequiredIntake from "./components/DailyRequiredIntake";
import CurrentWeight from "./components/CurrentWeight";
import { useState } from "react";
import FoodConsumption from "./components/FoodConsumption";
import DailyFoodConsumptionList from "./components/DailyFoodConsumptionList";
function App() {
const [weightDataFromCurrentWeightComp, setWeightDataFromCurrentWeightComp] =
useState("");
const [foodItemFromFoodConsumption, setFoodItemFromFoodConsumption] =
useState("");
const [consumedFoodList, setConsumedFoodList] = useState([]);
function foodItemToApp(foodItemData) {
setConsumedFoodList((consumedFoodList) => [
...consumedFoodList,
foodItemData,
]);
console.log(consumedFoodList);
}
function currentWeightToApp(currentWeightData) {
setWeightDataFromCurrentWeightComp(currentWeightData);
}
return (
<>
<DailyRequiredIntake
consumedFoodData={foodItemFromFoodConsumption}
currentWeight={weightDataFromCurrentWeightComp}
/>
<CurrentWeight childToParent={currentWeightToApp} />
<br></br>
<FoodConsumption childToParent={foodItemToApp} />
<DailyFoodConsumptionList
consumedFoodData={foodItemFromFoodConsumption}
/>
</>
);
}
export default App;
我期望发生的是,当我按下此按钮时,会出现一个完全更新的状态,其中包含我输入到 FoodConsumation 输入中的最新信息。
React
useState
本质上是异步的,这就是您看到延迟更新的原因
建议:
向您的应用程序组件添加一个
useEffect
块以记录更新后的状态
useEffect(() => {
console.log(consumedFoodList);
}, [consumedFoodList]);