javascript - 父组件的状态更新后，组件不会更新

Question

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不断变大，但我的组件不再改变。

Answer 1

这是你的问题:

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