props 被两次添加到在 React / Javascript 中的组件外部声明的数组变量中
Posted
技术标签:
【中文标题】props 被两次添加到在 React / Javascript 中的组件外部声明的数组变量中【英文标题】:props getting added twice to the array variable that is declared outside the component in React / Javascript 【发布时间】:2022-01-17 13:37:42 【问题描述】:我正在尝试将用户输入的新数据添加到在名为 DUMMY_MEALS 的组件外部声明的数组中,然后将其呈现为列表。
这里的问题是“数据”是一个对象添加两次或更多到 DUMMY_MEALS 并在页面中呈现两次。 为什么会这样?
有问题的组件
"use strict";
import React from "react";
let DUMMY_MEALS = [
id: "m1", name: "Sushi",
];
const MealList = (data) =>
//const data = id: "m5", name: "pushi"
let mealslist = [];
DUMMY_MEALS = [data, ...DUMMY_MEALS];
mealslist = DUMMY_MEALS.map((meal) => <li>meal.name</li>);
return <ul>mealslist</ul>;
;
export default MealList;
父组件
const Header = () =>
const [data, setData] = useState();
const sendInputData = (inputData) =>
setData(inputData);
return (
<>
<MealsList data=data/>
<MealForm getInputData=sendInputData/>
</>
);
;
export default Header;
兄弟组件
const MealForm = (props) =>
const [name, setName] =useState("");
const formSubmitHandler = (e) =>
e.preventDefault();
let inputData =
key : Math.random(),
name : name,
props.getInputData(inputData);
inputData = ;
return (
<form onSubmit=formSubmitHandler>
<label htmlFor="name">name</label>
<input type="text" id="name" value=name onChange=(e)=>setName(e.target.value)></input>
<button>Submit</button>
</form>
);
;
export default MealForm;
【问题讨论】:
你能展示data
中的样本吗?
我们无法通过查看屏幕截图来帮助您解决问题,您似乎正在通过表单添加数据,但您尚未从该组件发布任何内容。请发帖minimal, reproducible example。
@BrendanBond 我已经添加了父组件。请检查。
@raina77ow 我在整个步骤中添加了日志,你可以在上面的截图中看到。
正如我所提到的,您正在使用<MealForm>
组件添加数据。你还没有发布minimal, reproducible example。
【参考方案1】:
您应该在MealList
组件中使用useState
挂钩而不是let mealslist = [];
。
并且不要使用 DUMMY_MEALS 作为组件状态。使用 useEffect
钩子将新餐添加到状态只需一次。
查看这个测试代码CodeSandbox
MealList 组件更改如下:
const MealList = ( data ) =>
const [mealslist, setMealList] = useState([]);
useEffect(() =>
if (data)
setMealList([data, ...DUMMY_MEALS]);
, []);
return <ul>
mealslist.map((meal)=> <ListRender meal=meal />)
</ul>;
;
这是你的App
组件:
const data =
id: "k123",
name: "Falafel",
description: "An Iranian food.",
price: 16.5
;
export default function App()
return (
<MealList data=data />
);
【讨论】:
感谢您的回复。它会起作用的。但是,我试图理解为什么它不适用于 DUMMY_MEALS 变量,这就是我要解决的问题。 @MIDHUNV 因为 DUMMY_MEALS 是组件外部的常规变量,并且由于组件渲染两次,所以道具将两次添加到 DUMMY_MEALS。另一方面,如果您尝试使用“useEffect”来防止重复值,您将看不到更改,因为 DUMMY_MEALS 不是“状态”。请看我为你准备的 CodeSandbox。 好的。我在每一步都放了 console.log 。如果组件渲染两次,它不是多次控制台吗?那没有发生 我试过你的,它是这样工作的。但是在这里,正如您在上面看到的,我使代码更精简,“MealForm”中的表单数据控制其父组件“Header”的状态。 “MealList”组件是它的子组件。当我在“MealList”中添加一个状态变量时,它正在无限循环。以上是关于props 被两次添加到在 React / Javascript 中的组件外部声明的数组变量中的主要内容,如果未能解决你的问题,请参考以下文章
React-Router路由跳转时render触发两次的情况。
React - 即使定义了 defaultProps,TypeScript 也会将 undefined 添加到 prop