props 被两次添加到在 React / Javascript 中的组件外部声明的数组变量中

Posted 2023-02-22

【中文标题】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”中添加一个状态变量时，它正在无限循环。