将useState函数作为道具传递给另一个组件

Question

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

我在子组件中添加了useState函数作为buttonClick的handleevent，我认为这个错误意味着它在循环中被调用？有人能帮我理解这里的问题吗？代码如下：

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})

第二，更重要的是。。。您永远不会使用此处传递的addPerson道具。您的组件所做的第一件事就是用一个同名的新函数对该变量进行阴影处理：

function addPerson()
{
//...
}

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

不要遮蔽变量。为函数指定自己的名称。例如：

function myAddPerson()
{
//...
}

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

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

基本上，这根本不是React的问题。这是一个简单的JavaScript。如果为变量指定一个新值(用相同的名称定义函数正是这样做的(，则原始值将丢失。

Answer 2

如果没有正确地破坏props函数，需要这样做。

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