reactjs 如何添加组件 prop 到阵列时,点击该组件?

e4yzc0pl  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(200)

当你点击某个组件时,如何将组件 prop 添加到阵列中?
我已经Map了组件,当您单击时,它们的{name}应该会添加到阵列中或从阵列中删除。
但是peopleArr保持为空。

// App.tsx

import React from 'react';
import { useState } from "react";
import Card from "./Card";
import people from "../../data/people";

let arr: string[] = [];

function App() {
const [peopleArr, setNames] = useState(arr);

function addName(name: string) {
  if (name && !peopleArr.includes(name)) {
    setNames((peopleArr) => [...peopleArr, name]);
} else {
    peopleArr.filter((el: string) => el !== name);
}
}

return (
 <div>
  {people.map((person) => (
    <Card key={person.id} name={person.name} onClick={() => addCard(person.name)} />))}
 </div>
);
}

我试过了,但一点效果都没有

<Card key={person.id} name={person.name} onClick={() => addCard(person.name)} />))}

我试着把所有的东西都加到组件里面,也没有成功,而且它只保存了一个名字。

u3r8eeie

u3r8eeie1#

我认为问题出在函数调用上,您的函数名是addName,但您将其命名为addCard

相关问题