Javascript 组件没有'；t一旦父组件'；s的状态已更新 import React，{Component}来自'React'； 导入“/DisplayCard.css”； 类DisplayCard扩展组件{ 运行数组=（数组）=>{ 对于（var i=0；i{ if（savedTasks.length==0）{ return

您没有保存的任务。

}否则{ 返回此.runArray（savedTasks） } } render（）{ 返回( {this.renderElements（this.props.saved）} ) } } 导出默认显示卡； 嘿，伙计们

我不熟悉react，所以这是我的子组件，它从父组件获取状态。我的目标是在每次更改数组

this.props.saved

时重新渲染组件

此组件呈现：

您没有保存的任务。

当

This.props.saved.length==0

时，当我输入第一个任务时，它呈现

{array[0].task}

，但它保持在

{array[0].task}

之后。我确实看到状态一直在变化，并且

这个.props.saved

不断变大，但我的组件不再变化。

这是您的问题：

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可能会抱怨您的元素缺少

键

属性-有关更多信息，请参阅文档：

这是您的问题：

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可能会抱怨您的元素缺少

键

属性-有关详细信息，请参阅文档：

问题在于

runArray

函数。在循环中，您返回的是第一个元素，就这样。我猜，您只看到了第一个条目

当您尝试渲染所有任务时，我建议您映射任务，例如

runArray=（array）=>array.map（entry=>{entry.task}）

问题出在

runArray

函数中。在循环中，您返回的是第一个元素，就这样。我猜，您只看到了第一个条目

当您尝试渲染所有任务时，我建议您映射任务，例如

runArray=（array）=>array.map（entry=>{entry.task}）

这是因为您编写了错误的runArray函数。您在for循环中进行了返回，因此它在第一次迭代后中断。它不会在整个数组上进行迭代

您需要将for循环转换为贴图：

runArray=（array）=>{
返回array.map（v=>{v.task}）
}

---

它解决了您的问题吗？

这是因为您编写了错误的runArray函数。您在for循环中进行了返回，因此它在第一次迭代后会中断。它不会迭代整个数组

您需要将for循环转换为贴图：

runArray=（array）=>{
返回array.map（v=>{v.task}）
}

---

它解决了您的问题吗？

您必须更新组件的状态才能触发渲染功能。您的渲染功能不会被触发，因为在道具更改时您没有更新状态。有许多方法可以在道具更新时更新状态。一种方法可能是：

runArray = (array) => {
  return array.map(v => <div>{v.task}</div>)
}

还可以将渲染函数更改为使用组件的状态，如下所示：

componentWillReceiveProps(nextProps){
  if (nextProps.saved !== this.props.saved) {
    this.setState({ saved: nextProps.saved })
  }
}

渲染=（）=>{
if（this.state.savedTasks.length==0）{
return您没有保存的任务。

}否则{
返回this.runArray（this.state.savedTasks）
}
}

您必须更新组件的状态才能触发渲染功能。您的渲染功能不会被触发，因为在道具更改时您没有更新状态。更新道具时有许多方法可以更新状态。一种方法可能是：

runArray = (array) => {
  return array.map(v => <div>{v.task}</div>)
}

还可以将渲染函数更改为使用组件的状态，如下所示：

componentWillReceiveProps(nextProps){
  if (nextProps.saved !== this.props.saved) {
    this.setState({ saved: nextProps.saved })
  }
}

渲染=（）=>{
if（this.state.savedTasks.length==0）{
return您没有保存的任务。

}否则{
返回this.runArray（this.state.savedTasks）
}
}

使用.map以正确呈现您的任务。您可以删除runArray并完全依赖于道具，这样您就不需要跨函数传递参数，因为它很快就会变得混乱。下面是一个快速运行的示例，介绍如何创建父组件，您可以在其中添加任务并将其传递到组件中，以便在道具会发生变化，因此会产生反应

类应用程序扩展了React.Component{
状态={
任务标签：“”，
任务：[
{
id:1，
标签：“做点什么”
},
{
id:2，
标签：“学点东西”
}
]
};
handleInput=evt=>{
这是我的国家({
[evt.target.name]：evt.target.value
});
};
handleSubmit=evt=>{
evt.preventDefault（）；
this.setState（prevState=>({
任务标签：“”，
任务：[
…国家任务，
{
id:prevState.tasks.length+1，
标签：this.state.taskLabel
}
]
}));
};
render（）{
返回(
创建任务
);
}
}
类DisplayCard扩展了React.Component{
renderTasks=（）=>{
if（this.props.tasks.length！==0）{
返回此.props.tasks.map（任务=>(
{task.label}
));
}否则{
不返回任务；
}
};
render（）{
返回{this.renderTasks（）}；
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（，rootElement）；

---

使用.map以正确呈现您的任务。您可以删除runArray并完全依赖于道具，这样您就不需要跨函数传递参数，因为它很快就会变得混乱。下面是一个快速运行的示例，介绍如何创建父组件，您可以在其中添加任务并将其传递到组件中，以便在道具会发生变化，因此会产生反应

类应用程序扩展了React.Component{
状态={
任务标签：“”，
任务：[
{
id:1，
标签：“做点什么”
},
{
id:2，
标签：“学点东西