Javascript 使用已编辑数组的ReactJS渲染问题

为什么ReactJS在使用array.splice删除中间元素后，在阵列不同的情况下删除最后一个元素

这是我的密码。我正在使用React Redux

const reducerNotesAndLogin = (state = initialState, action) => {
var tableNotes = "notities";
var tableCategories = "categories";

switch(action.type){
case "CATEGORY_REMOVE":
        // Remove the category
        var newCategories = state.categories;

        console.log("state.categories", state.categories);
        console.log("before: ", {newCategories});
        var index = 0;
        for(var i = 0; i < newCategories.length; i++){
            if(newCategories[i].id === action.payload.categoryId){

                newCategories.splice(i, 1);
                index = i;
                i--;
            }
        }

        console.log("after: ", {newCategories});

        state = {
            ...state,
            categories: newCategories
        }

break;
        default:
            break;
    }

    return state;
}

export default reducerNotesAndLogin;

const reducerNotesAndLogin=（state=initialState，action）=>{
var tableNotes=“notities”；
var tableCategories=“categories”；
开关（动作类型）{
“类别移除”案例：
//删除该类别
var newCategories=state.categories；
日志（“state.categories”，state.categories）；
log（“before:，{newCategories}）；
var指数=0；
对于（var i=0；i

下面的输出（我删除了中间的元素。我的web应用程序总是删除类别的最后一个元素（但不是从数组中）

步骤1：初始状态

步骤2：删除中间项，希望删除中间项

步骤3：混淆

为什么数组正确，但视图不正确？我正在更新state.categories，对吗

这是我的渲染代码（原样-不过滤掉任何其他可能很重要的代码）

分类机构：

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

import CategoryItem from './CategoryItem';

import Button from './../../Button';
import store from '../../../redux/store-index';

class CategoriesBody extends React.Component {
render(){
    return (
        <div>
            <ul className="list--notes">
                {this.props.categories.map((category) => {
                    if(category.id === undefined){ // No categories
                        return <li>No categories</li>
                        } else {
                            return (
                                <div>
                                    <CategoryItem category={category} />
                                    <div className="mb-small hidden-sm hidden-md hidden-lg"> </div>
                                </div>
                            );
                        }
                    })}
                </ul>
            </div>
        );
    }
}

function mapStateToProps(state){
    return {
        categories: state.reducerNotesAndLogin.categories,
        categoriesLength: state.reducerNotesAndLogin.categories.length
    };
}

export default connect(mapStateToProps)(CategoriesBody);

从“React”导入React；
从'react redux'导入{connect}；
从“/CategoryItem”导入CategoryItem；
从“/../../Button”导入按钮；
从“../../../redux/store index”导入存储；
类CategoriesBody扩展了React.Component{
render（）{
返回(

{this.props.categories.map（（category）=>{
如果（category.id==未定义）{//无类别
返回
无类别
}否则{
返回(
);
}
})}

);
}
}
函数MapStateTops（状态）{
返回{
类别：state.reducerNotes和login.categories，
categoriesLength:state.ReducerNotes和Login.categories.length
};
}
导出默认连接（MapStateTops）（CategoriesBody）；

CategoriesItem.js：

    import React from 'react';
import store from './../../../redux/store-index';
import Button from './../../Button';

class CategoryItem extends React.Component {
    constructor(props){
        super();
        this.state = {
            edit: false,
            categoryName: props.category.categoryName,
            categoryColor: props.category.categoryColor
        }

        this.onClickEdit = this.onClickEdit.bind(this);

        this.onChangeCategoryColor = this.onChangeCategoryColor.bind(this);
        this.onChangeInputCategoryName = this.onChangeInputCategoryName.bind(this);

        this.onClickEditSave = this.onClickEditSave.bind(this);
        this.onClickEditCancel = this.onClickEditCancel.bind(this);
    }

    removeCategory(id, name){
        console.log("nsvbsvbfjvbdjhbvv");
        store.dispatch({ type: "CATEGORY_REMOVE", payload: {
            categoryId: id
        }});

        // store.dispatch({type: "NOTIFY", payload: {
        //     type: 'success',
        //     message: 'Category "' + name + '" removed!'
        // }});
    }

    onClickEdit(){
        this.setState({
            edit: true
        });
    }

    onChangeCategoryColor(e){
        this.setState({
            categoryColor: e.target.value
        });
    }

    onChangeInputCategoryName(e){
        this.setState({
            categoryName: e.target.value
        });
    }

    onClickEditSave(){
        this.setState({
            edit: false,
            categoryName: this.state.categoryName,
            categoryColor: this.state.categoryColor
        });

        store.dispatch({type: "CATEGORY_EDIT", payload: {
            categoryId: this.props.category.id,
            categoryName: this.state.categoryName,
            categoryColor: this.state.categoryColor
        }});

        store.dispatch({type: "NOTIFY", payload: {
            type: "success",
            message: "Category saved!"
        }});
    }

    onClickEditCancel(){
        this.setState({
            edit: false,
            categoryName: this.props.category.categoryName,
            categoryColor: this.props.category.categoryColor
        });
    }

    render(){
        return (
            <li key={this.props.category.id} className={this.state.edit === true ? "mt mb" : "flex-justify-between flex-align-center"}>
                <div className={this.state.edit === true ? "d-none" : ""}>
                    <div className="input--color" style={{
                        backgroundColor: this.state.categoryColor
                        }}>&nbsp;</div>

                    {this.state.categoryName}

                </div>

                {/* Mobile */}
                <div className={this.state.edit === true ? "d-none" : "hidden-sm hidden-md hidden-lg"}>
                    <Button onClick={() => this.onClickEdit()} buttonType="primary">Edit</Button>
                    <div className="mt-small"> </div>
                    <Button onClick={() => this.removeCategory(this.props.category.id, this.props.category.categoryName)} type="primary">Remove</Button>
                </div>

                {/* Tablet and desktop */}
                <div className={this.state.edit === true ? "d-none" : "hidden-xs"}>
                    <div style={{float:'left',}}><Button onClick={() => this.onClickEdit()} buttonType="primary">Edit</Button></div>
                    <div style={{float:'left',marginLeft:'15px'}}><Button onClick={() => this.removeCategory(this.props.category.id, this.props.category.categoryName)} type="primary">Remove</Button></div>
                </div>


                {/* EDITING STATE */}

                <div className={this.state.edit === true ? "" : "d-none"}>
                    <div className="row">
                        <div className="col-xs-12">
                            <input onChange={this.onChangeCategoryColor} className="input--wide" type="color" value={this.state.categoryColor} 
                                style={{backgroundColor: this.state.categoryColor, height: '30px'}}
                            />
                            <input onChange={this.onChangeInputCategoryName} className="input--wide" type="text" value={this.state.categoryName} />
                        </div>
                    </div>
                    <div className="row mt">
                        <div className="col-xs-12">
                            <Button buttonType="primary" onClick={() => this.onClickEditSave()}>Save</Button>
                        </div>
                    </div>
                    <div className="row mt-small">
                        <div className="col-xs-12">
                            <Button buttonType="secondary" onClick={() => this.onClickEditCancel()}>Cancel</Button>
                        </div>
                    </div>
                </div>
            </li>
        )
    }
}

export default CategoryItem;

从“React”导入React；
从“/../../../redux/store index”导入存储；
从“/../../Button”导入按钮；
类CategoryItem扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
编辑：false，
categoryName:props.category.categoryName，
类别颜色：props.category.categoryColor
}
this.onClickEdit=this.onClickEdit.bind（this）；
this.onChangeCategoryColor=this.onChangeCategoryColor.bind（this）；
this.onChangeInputCategoryName=this.onChangeInputCategoryName.bind（this）；
this.onClickEditSave=this.onClickEditSave.bind（this）；
this.onClickEditCancel=this.onClickEditCancel.bind（this）；
}
removeCategory（id、名称）{
console.log（“nsvbsvbfjvbdjhbvv”）；
调度（{type:“CATEGORY_REMOVE”），有效负载：{
类别id:id
}});
//调度（{type:“NOTIFY”），有效负载：{
//键入：“成功”，
//消息：“类别”+“名称+”已删除！”
// }});
}
onClickEdit（）{
这是我的国家({
编辑：真
});
}
onChangeCategoryColor（e）{
这是我的国家({
类别颜色：e.target.value
});
}
onChangeInputCategoryName（e）{
这是我的国家({
categoryName:e.target.value
});
}
onClickEditSave（）{
这是我的国家({
编辑：false，
categoryName:this.state.categoryName，
categoryColor:this.state.categoryColor
});
调度（{type:“CATEGORY_EDIT”），有效负载：{
categoryId:this.props.category.id，
categoryName:this.state.categoryName，
categoryColor:this.state.categoryColor
}});
调度（{type:“NOTIFY”），有效负载：{
键入：“成功”，
信息：“类别已保存！”
}});
}
onClickEditCancel（）{
这是我的国家({
编辑：false，
categoryName:this.props.category.categoryName，
categoryColor:this.props.category.categoryColor
});
}
render（）{
返回(

{this.state.categoryName}
{/*Mobile*/}
this.onClickEdit（）}buttonType=“primary”>编辑
this.removeCategory（this.props.category.id，this.props.category.categoryName）}type=“primary”>Remove
{/*平板电脑和桌面*/}
this.onClickEdit（）}buttonType=“primary”>编辑
this.removeCategory（this.props.category.id，this.props.category.categoryName）}type=“primary”>Remove
{/*编辑状态*/}
这个.onClickEdit
var newCategories = state.categories;

var newCategories = [...state.categories];

for (var i = 0; i < newCategories.length; i++) {
      if (newCategories[i].id === action.payload.categoryId) {
        newCategories.splice(i, 1);
        index = i;
        i--;
      }
    }

<div key={category.id}>
    {this.props.categories.map....
    ...
</div>