mapStateToProps 在状态改变后使 props.{variable} 未定义

Question

我正在使用 Redux 学习 React，遇到了这个问题，其中有两个连接的组件 - AvengerTable (Table) 和 AvengerTableRow (Row)。

AvengerTableRow 组件在AvengerTableRow 内部使用。我在AvengerTable 中mapStateToProps 并将该状态的一部分传递给每个AvengerTableRow 组件。在 AvengerTableRow 内部，我调度了一个动作来更改该特定 r 的值。但是现在，由于某种原因，我的AvengerTable 组件中的道具失去了由mapStateToProps 映射的状态，并且它变得未定义。

实际上，我在 reducer 中更改了部分状态，所以我认为它可能不会再次调用 render。所以我也尝试返回新状态。但即便如此，道具也会变得未定义。

AvengerTable 组件：

    render() {
            const tableRows = this.props.avengers.map(avenger => (
                <AvengerTableRow key={avenger.id} avenger={avenger} />)
            )

            return (
                <div><h2>Avengers List</h2>
                    <table className="table table-sm table-hover">
                        <thead className="thead-dark">
                            <tr>
                                <th>Name</th>
                                <th>Avenger Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {tableRows}
                        </tbody>
                    </table>
                </div>
            )
        }

    const mapStateToProps = state => {
        return { avengers: state.homeReducer.avengers }
    };

AvengerTableRow 组件：

    render() {
        return (
            <tr>
                <td>{this.state.editable ? <input className="form-control" onChange={e => this.editChangeHandler(e, 'name')}
                    defaultValue={this.state.avenger.name} /> : this.state.avenger.name}</td>
                <td>{this.state.editable ? <input className="form-control" onChange={e => this.editChangeHandler(e, 'avengername')}
                    defaultValue={this.state.avenger.avengername} /> : this.state.avenger.avengername}</td>
                <td>
                    {this.state.editable ? <button onClick={this.saveAvenger} className="btn btn-sm btn-primary">Save</button> :
                        <button onClick={this.editContent} className="btn btn-sm btn-default">Edit</button>
                    }
                    &nbsp;
                    {this.state.editable ? <button onClick={this.cancelEdit} className="btn btn-sm btn-default">Cancel</button> :
                        <button className="btn btn-sm btn-danger">Delete</button>
                    }
                </td>
            </tr>
        )
    }
}

saveAvenger(e) {
    e.preventDefault();
    this.props.editAvenger(this.state.avenger);
    this.setState({
        originalAvenger: { ...this.state.avenger }
    });
    this.editContent();
}

const mapDispatchToProps = dispatch => ({ editAvenger: avenger => dispatch(editAvenger(avenger)) })

减速机：

......
case homeActionTypes.EDIT_AVENGER: {
    return state.avengers.map(avenger =>
        avenger.id == action.payload.id ? ({ ...avenger, name: action.payload.name, avengername: action.payload.avengername }) : avenger)
}
......

AvengerTableRow 中的 dispatch 完成后，我在 AvengerTable 中的 props 是这样的：

​{
   avengers: undefined,
   dispatch: function dispatch(),
   __proto__: Object { … }
}

请帮助我理解

1. 为什么我的道具avengers在props里面变得未定义，即使 状态正在减速器中返回。
2. 另外，即使 dispatch 没有异步运行，为什么 props 会丢失之前渲染中设置的状态？
3. 即使connect 没有检测到由于状态的浅层变化而导致的状态变化，为什么它会丢失其已经映射到 props 的状态？

Answer 1

要从商店返回更新后的数组，您需要更新您的状态，而不是直接更新您目前所做的。

case homeActionTypes.EDIT_AVENGER: {
        return {...state , avengers : state.avengers.map(avenger =>
            avenger.id == action.payload.id ? ({ ...avenger, name: action.payload.name, avengername: action.payload.avengername }) : avenger)
    }
    }