Question

我正在学习与Redux的React并遇到了这个问题，其中有两个连接的组件 - AvengerTable（Table）和AvengerTableRow（Row）。

AvengerTableRow组件在AvengerTableRow内使用。我在mapStateToProps中AvengerTable，并将该状态的一部分传递给每个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发送完成后，我在AvengerTable中的道具看起来像这样：

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

请帮助我理解

为什么我avengers内的道具props变得未定义国家正在减速机返回。
即使调度不是异步运行，为什么道具会丢失在前一个渲染中设置的状态？
即使connect由于状态变化较小而未检测到状态发生变化，为什么它已经将已映射的状态丢失为道具？

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)
    }
    }

mapStateToProps制作道具。{variable}在状态改变后未定义

1 个答案: