javascript - 调用调度后组件未更新

Question

我有一个待办事项列表react-redux应用程序，我试图了解redux的工作原理。我创建了一个初学者待办事项列表应用程序。

我遇到的问题是，当从另一个文件调用 dispatch 时，子组件 ToDoList.jsx 不会更新，但是 mapStateToProps 确实被调用，并返回正确的信息。该组件只是不重新渲染。

应用程序描述

有两个组件(app.js 除外)，AddToList.jsx，它有一个镜像文本字段的标签，以及一个可让您将内容添加到待办事项列表数组中的按钮.

接下来，有一个名为 ToDoList.jsx 的子组件，它显示待办事项的数组。

CodeSandbox

App.js

...
  <div className="App">
    <Provider store={store}>
          <AddToList />
    </Provider>
  </div>
...

AddToList.jsx

...
    <>
        <input type="text" value={props.inputText} placeholder="To do item" onChange={props.inputChangeHandler}/>
        <button type="button" onClick={props.addToListHandler}>Add To List</button>
        <ToDoList />
    </>
...



function mapStateToProps(state) {
    return {
        inputText: state.inputText
    }
}

function mapDispatchToProps(dispatch) {
    return {
        inputChangeHandler: (evt) => {
            const action = {type: 'INPUT_CHANGE', text: evt.target.text};
            dispatch(action);
        },
        addToListHandler: () => {
            const action = {type: 'ADD_TO_LIST'};
            dispatch(action);
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(AddToList);

ToDoList.jsx

import React from 'react';
import { connect } from 'react-redux';

const ToDoList = (props) => {

    return ( 
        <ul>
            {props.toDoList.map((toDoItem, index) => {
                return <li key={index}>{toDoItem}</li>
            })}
        </ul>
     );
}




function mapStateToProps(state) {
    console.log(state.toDoList);
    // ******* Gets Called, and logs correct data **********

    return {
        toDoList: state.toDoList
    };
}


export default connect(
    mapStateToProps
)(ToDoList);

Answer 1

问题是您正在使用这段代码:

case "ADD_TO_LIST":
  newState.toDoList.push(state.inputText);
  break;

由于您push到newState.toDoList数组，reducer返回相同的对象(但发生了变化)。当状态改变时，connect将为React组件提供相同的对象。但是，React 不会更新列表，因为它是同一个对象(通过引用)。

相反，你可以做这样的事情，这不会改变原始对象:

case "ADD_TO_LIST":
  const toDoList = [...state.toDoList, state.inputText];
  newState = {
    ...state,
    toDoList
  };
  break;

在此处查看操作:https://codesandbox.io/s/11764qzpj (但请注意，仍然存在一个错误!尝试编辑输入并将其添加到列表中。我将把这个作为练习留给您)。

<小时/>

旁注:我还注意到，每次调用 reducer 时都会创建一个newState。但这是不必要的，而且往往是有害的。如果状态没有变化，您应该始终返回原始的 state 对象。否则 React 会认为状态已经改变，并不必要地尝试重新渲染组件。