我'm creating a simple app and I'm无法重新渲染子组件 . 当在父组件(App)中调用setState时,传递给子组件(CardContainer)的props不知道如何做到这一点 . 应用程序中的状态肯定会更改(它显示在console.logs中),但 I need CardContainer to re-render the array it maps over once the App state is changed . 有任何想法吗?谢谢!
这是应用程序代码(父组件):
import React, { Component } from 'react';
import Header from './Header';
import AddButton from './AddButton';
import CardContainer from './CardContainer';
import style from '../style/App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
cards: [{id: 1, title: 'first', text: 'Random stuff that is on the paage.'},
{id: 2, title: 'second', text: 'More text goes here'},
{id: 3, title: 'third', text: 'to doooo'}],
cardSelected: false,
selectedCard: []
};
this.addCard = this.addCard.bind(this);
this.deleteCard = this.deleteCard.bind(this);
this.openSelectedCard = this.openSelectedCard.bind(this);
this.closeSelectedCard = this.closeSelectedCard.bind(this);
this.editExistingCard = this.editExistingCard.bind(this);
}
openSelectedCard(card) {
this.setState({
cardSelected: true,
selectedCard: card
})
}
closeSelectedCard() {
this.setState({
cardSelected: false
})
}
addCard() {
let newId = this.state.cards.length + 2;
this.openSelectedCard({id: newId, title: 'Untitled', text: 'Just start typing here.'});
// this.state.cards.push('New Post It');
// this.setState({
// cards: this.state.cards
// })
}
editExistingCard(cardToEdit) {
for (let i = 0; i < this.state.cards.length; i++) {
if(this.state.cards[i].id === cardToEdit.id) {
this.state.cards.splice(i, 1);
this.state.cards.splice(i, 0, cardToEdit);
}
}
this.setState({
cards: this.state.cards
}, () => {this.closeSelectedCard()})
}
deleteCard(index) {
console.log(this.state.cards[index])
this.state.cards.splice(index, 1);
this.setState({
cards: this.state.cards
})
}
render() {
return (
<div className={style.appContainer}>
<Header addCard={this.addCard}/>
<CardContainer openSelectedCard={this.openSelectedCard} closeSelectedCard={this.closeSelectedCard} cards={this.state.cards} deleteCard={this.deleteCard} selectedCard={this.state.selectedCard} cardSelected={this.state.cardSelected} editExistingCard={this.editExistingCard}/>
</div>
);
}
}
export default App;
这是CardContainer代码(子组件):
import React, { Component } from 'react';
import Card from './Card';
import SelectedCard from './SelectedCard';
import style from '../style/CardContainer.css';
class CardContainer extends Component {
constructor(props) {
super(props);
this.state = {
selecedCard: [],
cards: []
};
}
componentWillMount() {
this.setState({
cards: this.props.cards
})
}
render() {
return (
<div className={style.cardContainer}>
{this.state.cards.map((card, index) => (
<Card card={card} key={card.id} index={index} title={card.title} text={card.text} openSelectedCard={() => this.props.openSelectedCard(card)} deleteCard={this.props.deleteCard}/>
))}
{this.props.cardSelected &&
<div className={style.selectedCardComponentContainer}>
<SelectedCard card={this.props.selectedCard} closeSelectedCard={this.props.closeSelectedCard} editExistingCard={this.props.editExistingCard}/>
</div>
}
</div>
);
}
}
export default CardContainer;
5 回答
你在
componentWillMount
中调用setState,这样组件赢得't re-render because you'在一个甚至还没有渲染的组件中调用一个方法 . 你应该总是在componentDidMount
上设置状态,这是在React Docs上...希望有帮助:)
不要在子组件中使用
cards
状态 . 用户this.props.cards
而不是whcih会在道具改变时重新渲染你的组件 . 如果仍然不起作用,请使用component.forceUpdate()
这是
CardContainer
生命周期的问题 . 处于组件状态的cards
变量仅在首次装入组件后才设置 . 每当组件道具更新时,您也需要设置它 .修复:你需要在你内部添加这样的东西
CardContainer
组件:编辑:另一种解决方法是只使用组件
CardContainer
道具中已有的卡片 .子进程没有重新渲染,因为componentWillMount(已弃用以便停止使用它)和componentDidMount仅在初始启动时触发 . 另外我看到你已经在CardContainer组件中声明了一个空数组,即使你引入了props作为构造函数的参数 . 此外,SelectedCard组件正在接收props.selectedCard . 看起来你的卡片状态根本就没用了 .
我希望你不介意我没有给你回答,但我认为你应该稍微看一下这些要点并重新评估你的代码结构 .
感谢您的帮助!我发现我实际上需要在CardContainer的孩子Card组件中调用setState . 该卡是我想要重新渲染的实际组件,所以我应该考虑确保它也获得了setState . 我认为更新填充卡片的阵列就足够了 .