reactjs - 为什么我的父组件没有重新渲染？

Question

我有一个父组件，它呈现子组件列表。该列表取自 redux 存储。

在每个子组件中，我都有一个删除按钮，用于从 redux 存储中删除该特定项目，从而也删除该子组件。

我的子组件可以很好地从商店中删除该项目，那么为什么我的父组件没有重新渲染以将该子组件从列表中删除？

我尝试在父组件中设置“刷新”本地状态，并尝试在子组件中切换该状态，但由于某种原因不起作用。

这是我的父组件:

class TodaysClasses extends Component {

  componentDidMount() {
    this.props.fetchTodayClasses('Tuesday')
  }

  renderClasses = (classes) => {
    if (classes.length > 0) {
      return classes.map((classRoom) => {
        return (
          <ClassComp classId={classRoom.id} key={classRoom.id}
            deleteClass={this.props.deleteClass}
          />
        )
      })
    } else {
      return <div>There are no classes for today.</div>
    }
  }

  render() {
    return (
      <div>
        <h3>Todays Classes</h3>
        <div className="ui divider"></div>
        <div className="ui grid container">
          <div className="row">
            {this.renderClasses(this.props.classes)}
          </div>
          <div className="row">
            <Link to="/newclass" className="ui labeled primary icon button">
              <i className="plus icon" />
              Add Class
            </Link>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  // turn the classes object to an array for easier iterations
  return { classes: Object.values(state.classes) }
}

export default connect(mapStateToProps, { fetchTodayClasses, deleteClass })(TodaysClasses)

这是我的子组件:

const ClassComp = (props) => {
  const { teacher, subject, students, id } = props.classOf

  return (
    <div className="ui segment" >
      <div className="content">
        <div className="ui medium header">{teacher} - {subject}</div>
        <div className="ui divider"></div>
        <div className="ui sub header">Students</div>
        <div>{renderStudents(students)}</div>
        <div style={{ marginBottom: '30px' }}>
          <button className="mini compact ui negative right floated button"
            onClick={() => props.deleteClass(id)}>Delete Class
          </button>
          <button className="mini compact ui right floated button">Edit Class</button>
        </div>

      </div>
    </div >
  )
}


const renderStudents = (students) => {
  if (students && students.length > 0) {
    return (
      <ol>
        {students.map((student, index) =>
          <li key={index}>{student}</li>
        )}
      </ol>
    )
  } else {
    return <p style={{ margin: '10px' }} >No students registered.</p>
  }
}

const mapStateToProps = (state, ownProps) => {
  return { classOf: state.classes[ownProps.classId] }
}

export default connect(mapStateToProps)(ClassComp)

这是我的 Action 创建者:

export const fetchTodayClasses = day => async dispatch => {
  const response = await classes.get(`/classes?day=${day}`)

  dispatch({ type: 'FETCH_TODAYCLASSES', payload: response.data })
}

和

export const deleteClass = id => async dispatch => {
  await classes.delete(`/classes/${id}`)

  dispatch({ type: 'DELETE_CLASS', payload: id })
}

这是我的 reducer :

export default (state = {}, action) => {
  switch (action.type) {    
    case 'DELETE-CLASS':
      return _.omit(state, action.payload)
    case 'FETCH_TODAYCLASSES':
      return { ...state, ..._.mapKeys(action.payload, 'id') }    
    default:
      return state
  }
}

Answer 1

删除项目时您错过了一个步骤:

1. 已调度 DELETE-CLASS 类型的操作
2. 该项目被reducer删除
3. 缺少步骤 - 使用新数据更新商店

您可以通过 2 种常见模式来实现:

1. 通过 API 调用获取新数组

   componentDidUpdated() {
       this.props.actions.fetchTodayClasses(DAY);
   }
   

2. 更新reducer内的数组( redux mutation patterns )

    case 'DELETE-CLASS':
      let updatedClasses = _.omit(state, action.payload);
      return { ...state, ..._.mapKeys(updatedClasses, 'id') }
   

   我认为这两个选项是react-redux 中最常见的模式。你查一下这个SandBox观看演示。确保您在状态结构中正确使用它。