Rerender 会删除 React 中的数据

Question

我做了一个名为 wholeCard 的组件，其中有几个组件，如 3 输入、按钮、下拉列表 而且，我还在整个卡外制作了一个添加按钮。

问题是，当我单击添加按钮时，每个全卡组件中的数据都会消失。我知道这是因为它正在重新渲染组件，但是我如何阻止数据消失？

const [value, setValue] = useState(1);
function added(boo) {
boo.preventDefault();
setValue(value + 1);
}
<>
{[...Array(value)].map((e, position) => {
return ( <WholeCard key={position} }} /> ); })}
<button onClick={added}>Add!</button>
</>

请帮忙

Answer 1

我创建了一个StackBlitz，它可以满足您的要求。浏览index.js代码，您将了解如何在应用中实现相同的代码。

class App extends Component {
constructor() {
super();
this.state = {
cards: [
{
value: 'something',
id: 'some id'
}
]
};
}
addCardHandler = () => {
this.setState(prevState => ({
cards: prevState.cards.concat({
value: '',
id: Math.random()
})
}));
};
changeHandler = (e, id) => {
const value = e.target.value;
this.setState(prevState => {
const updatedCards = [...prevState.cards];
const reqCardIndex = updatedCards.findIndex(card => card.id === id);
const reqCard = updatedCards[reqCardIndex];
reqCard.value = value;
return {
cards: updatedCards
};
});
};
render() {
return (
<>
<div>
{this.state.cards.map(el => (
<Card
key={el.id}
{...el}
changed={() => this.changeHandler(event, el.id)}
/>
))}
</div>
<button onClick={this.addCardHandler}>Add</button>
</>
);
}
}