Question

我发现了很多类似的问题，似乎无法对我的情况进行排序

我有一个在数据发生变化时不会重新渲染的组件。

当MODE更改（字符串）时，实体会重新呈现和更新。

hotspot.description更改时，不会更新。

我可以看到商店中的描述已经改变，我可以控制台将更改记录到这个组件。

但是，description hotspot更改时，我无法更新此组件。

任何线索！？

连接

const mapStateToProps = (state) => {
  return {
    mode: state.admin.hotspot.mode,
    hotspot: state.admin.hotspot.edit,
  }
}

纯

export default class HotspotRenderer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hotspot:props.hotspot,
      mode:props.mode,
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      hotspot : nextProps.hotspot,
      mode: nextProps.mode,
    })
  }

  render() {
    const {hotspot,mode} = this.state

    const isEditingText = hotspot && mode === HOTSPOT_EDIT_MODE.TEXT
    const html = hotspot != null ? ReactHtmlParser(draftToHtml(hotspot.description)) : null

    return (
      <div>
        {
          isEditingText &&
          <Container>
            <div className={`hotspot-renderer hotspot${hotspot.id} hotspot-text-default`}><div>{html}</div></div>
          </Container>
        }
      </div>
    )
  }
}

admin.state.hotspot

const initialState = {
  isDraggingNewHotspot: false,
  edit:null,
  mode:null,
}

export function hotspot(prevState=initialState, action) {
  switch(action.type) {
  case START_ADD_HOTSPOT:      return { ...prevState, isDraggingNewHotspot: true }
  case FINISH_ADD_HOTSPOT:     return { ...prevState, isDraggingNewHotspot: false }
  case ADD_HOTSPOT:            return { ...prevState,  mode: HOTSPOT_EDIT_MODE.DRAG}
  case EDIT_HOTSPOT:           return { ...prevState,  edit: action.hotspot}
  case FINISH_EDIT_HOTSPOT:    return { ...prevState,  edit: null}
  case EDIT_HOTSPOT_MODE:      return { ...prevState, mode: action.mode }
  case UPDATE_HOTSPOT:         return { ...prevState, edit : action.hotspot }
  case GO_TO_EDIT_SCENE:       return { ...prevState, edit :null,mode :null }
  case UPDATE_SCENE_HOTSPOT_SUCCESS: return { ...prevState, edit: processUpdatedHotspot(prevState.edit,action.payload) }
  default:                     return prevState
  }
}

function processUpdatedHotspot(prev,update){

  if(!prev)
    return null

  if(!prev.id)
    prev.id = update.id

  return prev
}

以下是编辑说明的地方

  updateHotspotDescription(description){
    let hotspot = this.state.hotspot
    hotspot.description = description
    hotspot.imageUpdateRequired = true
    this.setState({hotspot : hotspot})
    this.state.onUpdateHotspot(hotspot)
  }

只要通过draft-js编辑器更改文本，就会调度此方法。

状态随更改而更新，另一个实体知道它们。

Answer 1

您必须按照Immutable pattern更新您的值，甚至在将其传递给redux之前（请参阅更新链接中的嵌套对象）。

因此，在将hotspot.edit发送到reducer之前，请务必按照不可变模式更新嵌套的description对象：

updateHotspotDescription(description){
    const hotspot = { 
        ...this.state.hotspot,
        description, // shorthand for description: description
        imageUpdateRequired: true,
    };
    this.setState({ hotspot });
    this.state.onUpdateHotspot(hotspot);
}

Answer 2

所以你必须质问自己，你确定你的action实际上已被采纳了吗？

switch语句中的任何非大小写将返回先前的状态，因此它不会重新渲染它是正常的。

要验证您的redux状态是否已更新，请遵循以下提示：

确保constants和actions

reducer

确保已由减速器正确使用已触发的action
在退回之前记录reducer中的下一个状态，这样您就可以确定下一个状态是正确的

按照以下步骤告诉我您的问题是否仍然存在

当Store中的对象中的数据发生更改时更新React

2 个答案: