将useState函数作为属性传递给另一个组件

Question

我试图将一个useState函数传递给另一个prop，但我得到以下错误:未捕获范围错误:超出了最大调用堆栈大小

我在子组件中添加了useState函数作为按钮单击的句柄事件，并且假设该错误意味着它在循环中被调用？任何人都可以帮助我理解这里的问题吗？代码如下：

    function App() {
        const[personListe, setPersonListe] = useState([
          {
            firstName:'Test',
            lastName:'testing',
            getFullName:function()
            {
                return `${this.firstName} ${this.lastName}`
            },
            age:28
            },
        ]);
  
      return (<>
          <Header />
          <h1>Welcome to my react page!</h1>
          <Inputfields personListe={personListe} addPerson={setPersonListe} />
          <PersonList personListe={personListe}/>
        </>
      );
    }

子组件（Inputfields.js）：

export default function Inputfields({personListe}, {addPerson})
{
    function addPerson()
    {
        let firstName = document.getElementById("firstNameID");
        let lastName = document.getElementById("lastNameID");
        let age = document.getElementById("ageID");
        if(firstName.value.length < 1 || lastName.value.length < 1 || age.value.length < 1)
        {
            alert("Please fill out all the fields!");
        }
        else
        {
            addPerson(
                {
                    firstName:firstName.value,
                    lastName:lastName.value,
                    age:age.value
                }
            );
            firstName.value = "";
            lastName.value = "";
            age.value = "";

        }
    }
    return(
        <>
            <Input id="firstNameID" placeholder="First name" /> <br />
            <Input id="lastNameID" placeholder="Last name" /> <br />
            <Input id="ageID" placeholder="Age" type="number" /> <br />
            <Button variant="contained" sx={{marginTop:2}} onClick={addPerson}>Add person</Button>
        </>
    );
}

Answer 1

你没有正确地破坏道具功能，你需要这样做。

export default function Inputfields({personListe,addPerson}) {...rest of your code}

Answer 2

这里有两个问题。首先，你没有正确地分解道具。有一个 props 对象传递给组件，而不是两个。从该对象中解构两个道具：

export default function Inputfields({personListe, addPerson})

第二，更重要的是…您永远不会使用这里传递的addPerson属性。组件要做的第一件事就是使用同名的新函数隐藏该变量：

function addPerson()
{
  //...
}

然后，该函数递归调用自己，直到堆栈溢出。

不要隐藏变量。给函数起一个自己的名字。例如:

function myAddPerson()
{
  //...
}

然后，在该函数中，您可以调用传递给组件的添加人。在 JSX 标记中调用本地函数：

<Button variant="contained" sx={{marginTop:2}} onClick={myAddPerson}>Add person</Button>

基本上，这根本不是一个反应问题。这是普通的JavaScript。如果你给一个变量赋了一个新值(定义一个同名函数就是这么做的)，那么原来的值就丢失了。