Question

我有一个容器组件连接到我用immutable.js创建的状态。当我更新状态时，我的redux检查器告诉我状态已更新，但我的组件没有获得新的更新，也没有重新呈现。

我的容器组件：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setCategoryActive } from '../actions'
import Category from '../components/Category'

class MenuList extends Component {


  constructor(props) {
    super(props)
    this.categories = this.props.categories
    this.subreddits = this.props.subreddits
    this.allCategories = this.categories.get("allCategories")
    this.byName = this.categories.get("byName")
  }

  printSubreddits(category) {
    const subreddits = this.byName.get(category)
    const subredditsByName = subreddits.get("subredditsByName")

    const list = subredditsByName.map((subreddit, i) => {
      return <p className="swag" key={i}>{subreddit}</p>
    })

    return list
  }

  isCategoryActive(category) {
    const cat = this.byName.get(category)
    return cat.get("active")
  }

  printCategory(category, i) {
    console.log(this.isCategoryActive(category))
    return (
      <div className="category-container" key={i}>
        <Category name={category}
          active={this.isCategoryActive(category)}
          setActive={this.props.setCategoryActive.bind(this, category)} />
        {this.isCategoryActive(category) ? this.printSubreddits(category) : null}
      </div>
    )
  }


  render() {

    return (
      <div>
        {this.allCategories.map((category, i) => {
          const x = this.printCategory(category, i)
          return x
        }, this)}
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  categories: state.subredditSelector.get('categories'),
  subreddits: state.subredditSelector.get('subreddits')
})

export default connect(mapStateToProps, {
  setCategoryActive
})(MenuList);

我的类别组件

class Category extends Component {

  printToggle(active) {
    if (active) {
      return <span> [-]</span>
    } else {
      return <span> [+]</span>
    }
  }

  componentWillReceiveProps(nextProps) {
    this.printToggle(nextProps.active)
  }

  render() {

    const { setActive, active, name } = this.props

    return (
      <div className="category-container">
        <a onClick={setActive}
        href="#"
        className="category-title">
          {name}
          {this.printToggle(active)}
        </a>
      </div>
    )
  }

}

export default Category

我的减速机

import { fromJS } from 'immutable'
import {
  SET_SUBREDDIT_ACTIVE,
  SET_CATEGORY_ACTIVE
} from '../actions'
import List from '../data/nsfw_subreddits.js'

const initState = fromJS(List)

const subredditSelector = (state = initState, action) => {
  switch (action.type) {
    case SET_SUBREDDIT_ACTIVE:
      return state
    case SET_CATEGORY_ACTIVE:
      return state.updateIn(['categories', 'byName', action.payload.name],
        x => x.set('active', !x.get('active')))
    default:
      return state
  }
}

export default subredditSelector

我已编码为JSON对象的状态

const list = {
  categories: {
    byName: {
      "example": {
        name: "example",
        id: 1,
        active: true,
        subredditsByName: ["example", "example"]
      },
      "example": {
        name: "example",
        id: 2,
        active: true,
        subredditsByName: ["example"]
      },
      "example": {
        name: "example",
        id: 3,
        active: true,
        subredditsByName: ["example", "example", "example"]
      }
    },
    allCategories: ["example", "example", "example"]
  },
  subreddits: {

我的猜测是我的减速器正在改变状态？虽然我不确定如何，因为我使用的是不可变的js函数？

Answer 1

所以我通过将构造函数从构造函数更改为常规函数并在我的render方法的顶部调用它来修复此问题！

Answer 2

你仍然应该保留你的构造函数，但只有在首次创建对象时需要完成的工作：

constructor(props) { super(props) }

是的，有

cleanPropData(){ this.categories = this.props.categories this.subreddits = this.props.subreddits this.allCategories = this.categories.get("allCategories") this.byName = this.categories.get("byName") }

很好。我没有听说有人在渲染函数的顶部调用它。很高兴知道有效。

我的组件没有更新，我是否正在改变状态？

2 个答案: