我有两个组件{addressone}，{addresstwo}和想要添加和删除{addresstwo}的按钮点击在{ad

Question

address two component

`<AddressTwo/>`

我已经应用切换逻辑，但我正试图添加和删除组件

<Button
onClick={()=>setIsToggled(!isToggled)}>+</Button>
{isToggled && <AddressTwo/>}

点击时添加

`<Button >+</Button>`

当此按钮被点击时删除组件

` <Button>-</Button>`

Answer 1

改变你的做法，

认为地址是接收1个对象的一个组件

{ id: Number, street: String, number: String, postCode: String }

和地址数是对象

的数组。

[ {...}, {...}]

在react中这样可能更容易管理

const [addresses, setAdresses] = useState([])
const addOne = () => setAddresses([...addresses, { id: null, street: "", number: "", postCode: "" }]
{...}
return(
<>
<h1>hello from profile</h1>
<button onclick={()=>addOne()}/>+</button>
{addresses.map((address, i)=>(
<AddressComponent address={address} />
)}
</>
)

代码是不完美的，但你得到的想法

，然后从那里，你可以玩你想要的数组…(pop, push, limit, find等)

勇气……