React 状态（redux）更新，界面没有

Question

已解决

@jonahe 帮助我意识到我在组件状态中存储了陈旧的数据，导致 redux 和组件存储之间不匹配。

@vs1682 指出存储更新检查相对较浅，因此不应依赖于深层嵌套更改。

---

原问题：

我在 redux 中使用基于 promise 的操作并遇到以下问题：一旦我的状态更新（根据 redux 记录器验证），可视化组件不会反映这一点。

动作流程：

1. 表单已提交（例如：生物属性更改）
2. 智能组件触发动作调度
3. 操作按预期工作并触发减速器
4. 状态更新良好（反映在控制台的 redux 记录器中）
5. 界面不反映变化（但状态肯定反映）

如上所述，我非常有信心我的行为和减速器都很好。我怀疑我忽略了 redux > 视觉流程中的某些内容。

以下是孤立的代码。我拿走了不相关的 jsx 等。

将状态映射到智能组件的 props：

export default connect( store => ( { 
    user: store.user ? true : false,
    contacts: store.contacts
} ) )( ContactList )

智能组件

<Person person = { this.state.showingperson } />

person 属性设置通过：

showPerson( e ) {
    e.preventDefault( )
    const showingperson = this.props.contacts.object[e.target.id]
    this.setState( { ...this.state, showingperson: showingperson } )
}

哑组件：

export const Person = ( { person } ) => {
    return <div id="persontable" className="backdrop">
                <div className = 'modal col l6 m12 s12 center'>
                    <p>Bio: { person.bio }.</p>
                </div>
            </div>
}

编辑：Reducer 代码：

从“时刻”导入时刻

const contactsReducer = ( state = { array: [], object: {} }, action ) => { 

    switch( action.type ) { 

        case 'UPDATE_FULFILLED':
        case 'GETALL_FULFILLED':
            // action.payload is an array of contacts resulting from a transformed firebase call
            return action.payload ? action.payload : state
        break

        case 'CLEAR_FULFILLED':
            return null
        break

        default:
            return state

     }

 }

 export default contactsReducer

Answer 1

使用下方评论部分的新信息进行编辑：

是<UserList /> 还是<Person /> 组件没有显示更新的数据？因为如果<Person /> 没有更新考虑到它从内部状态的陈旧数据中获取数据，那将是有意义的：

// this is used to set the internal component state
const showingperson = this.props.contacts.object[e.target.id]
// but after an update of the Redux state, this still points to the 
// old (not updated) object in the internal state
this.setState( { ...this.state, showingperson: showingperson } )

所以内部状态将包含对旧对象的引用，直到再次执行 showPerson 函数。

---

旧的错误答案：

这通常是由于 reducer 中的状态发生突变，导致 Redux 无法识别发生了应该重新渲染连接组件的更改。 （因为vs1682 提到的比较肤浅。）

所以在你的减速器中，确保你没有做这样的事情：

case UPDATE: {
  // mutation!
  state.contacts = action.payload;
  return state; 
}

但是有这样的东西

case UPDATE: {
  // No mutation. Creating a new object!
  return {...state, contacts: action.payload};
  // or do the equivalent with Object.assign, 
  // Don't forget an empty object as first argument.
}

Answer 2

Connect 方法经过高度优化。 它浅比较从 mapStateToProps 和 mapDispatchToProps 方法返回的组合对象与它们之前的结果。 如果它们浅相等，则包装的组件将不会更新。

要检查是否是这种情况，您可以将 componentWillReceiveProps 方法添加到包装的组件中，并检查您是否点击了此方法。