import React, {Component} from 'react';
import "./DisplayCard.css";
class DisplayCard extends Component {
runArray = (array) => {
for (var i = 0; i<array.length; i++) {
return <div>{array[i].task}</div>
}
}
renderElements = (savedTasks) =>{
if (savedTasks.length === 0) {
return <div className="noTasks"> <p>You have no saved tasks.</p> </div>
} else {
return this.runArray(savedTasks)
}
}
render() {
return (
<div className="DisplayCardContainer">
{this.renderElements(this.props.saved)}
</div>
)
}
}
export default DisplayCard;
大家好,
我是 react 新手,所以这是我的子组件,它从其父组件获取状态。我的目标是每次数组 this.props.saved
时重新渲染组件已更改。
该组件呈现:<p>You have no saved tasks.</p>
当 this.props.saved.length === 0
它呈现 <div>{array[0].task}</div>
当我进入第一个任务时,但它保持在 <div>{array[0].task}</div>
在那之后。我确实看到状态在不断变化并且 this.props.saved
不断变大,但我的组件不再改变。
最佳答案
这是你的问题:
runArray = (array) => {
for (var i = 0; i<array.length; i++) {
//the first time we get here, it immediately ends the function!
return <div>{array[i].task}</div>
}
}
此循环仅执行一次(在 i=0
处),然后返回,退出 runArray
函数并取消循环的其余部分。您可能想要返回一个元素数组,每个元素对应一个任务。我建议使用 Array.map() 来实现此目的,它采用一个数组并转换每个元素,创建一个新数组:
runArray = (array) => {
return array.map(arrayElement => <div>arrayElement.task</div>);
}
这应该可以解决问题。请注意,React 可能会提示您的元素缺少 key
属性 - 请参阅文档以获取更多信息:https://reactjs.org/docs/lists-and-keys.html
关于javascript - 父组件的状态更新后,组件不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54382932/