反应输入状态不重新呈现

Question

我正在分类，我有一个带删除方法的数据表，现在我正在尝试使用编辑方法

您可以看到我没有使用findIndex方法来查找索引并删除，但findIndex有很多问题，总是返回0或-1，但没有索引，因此我用简单的循环。

所以

我正在尝试进行编辑，我想我没有使用好的方法来呈现编辑字段。

现在我错过了一件事，无法更新可编辑输入的状态吗？

import React from 'react'
import DataTable from 'react-data-table-component';
import axios from 'axios';
import swal from "sweetalert";


export default class CategoriesData extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            rows:[],
            selectedCount: 0,
            editingMode: false,
            label: '',
            category_id: '',
        }
    }

    componentDidMount() {
        axios.get('category')
            .then((res)=> {
            this.setState({ data: res.data})
            })
            .catch((err) => {swal({title: 'Error',text: 'Unknown error',icon: 'error'})})
    }

    handleChange = (state) => {
        this.setState({rows: state.selectedRows,selectedCount: state.selectedCount})
    };

    handleEdit = (event) => {
        event.preventDefault()
        this.setState({editingMode: true, label: this.state.rows[0].label, category_id: this.state.rows[0].category_id})

    }

    changeCategory = () => {
        //axios.put('category/'+ this.state.rows[0].id)
    }

    handleChangeData = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    handleDelete = () => {
        if (this.state.selectedCount === 1){
            let item = this.state.rows[0]
            for (let i = 0; i < this.state.data.length; i++){
                if (this.state.data[i].id === item.id){
                    let prevState = this.state.data
                    let newState = prevState.splice(i,1);
                    this.setState(newState)
                }
            }
            axios.delete('category/'+item.id)
                .then((res)=> {
                    console.log(res)
                })
                .catch((err) => {
                    console.log(err)
                })
        } else {
            let items = this.state.rows;
            items.map((item) => {
                for (let i = 0; i < this.state.data.length; i++){
                    if (this.state.data[i].id === item.id){
                        let prevState = this.state.data
                        let newState = prevState.splice(i,1);
                        this.setState(newState)
                    }
                }
                axios.delete('category/'+item.id)
                    .then((res)=> {
                        console.log(res)
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            });
        }
    }

    render() {
        const columns = [
            {
                name: 'ID\'s',
                selector: 'id',
                sortable: true,
            },
            {
                name: 'Label',
                selector: 'label',
                sortable: true,
            },
            {
                name: 'Slug',
                selector: 'slug',
                sortable: true,
            },
        ];
        const data = [...this.state.data];
        let categories = this.state.data.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)

        if (this.state.editingMode) {
            return (
               <>
                   <DataTable
                       title="Categories"
                       columns={columns}
                       data={data}
                       pagination={true}
                       selectableRows
                       Clicked
                       onSelectedRowsChange={this.handleChange}
                       Selected={this.handleChange}
                   />
                   {this.state.selectedCount > 0 ? <button type="button" onClick={this.handleDelete} className="input border border-black hover:bg-red-700 hover:text-white">Delete</button> : null}
                   {this.state.selectedCount === 1 ? <button type="button" onClick={this.handleEdit} className="input border border-black hover:bg-green-700 hover:text-white">Edit</button> : null}

                   <div>
                    <label htmlFor="label">Label</label>
                    <input type="text" name="label" id="label" onChange={this.handleChangeData} className="input" value={this.state.rows[0].label}/>
                </div>
                <div>
                    <label htmlFor="category_id">Children Category ( not required )</label>
                    <select name="category_id" onChange={this.handleChangeData} className="input" id="category_id">
                        {categories}
                    </select>
                </div>
               <div>
                   <button onClick={this.changeCategory} className="rounded px-4 py-2 my-2 bg-light-gray text-light-blue">Submit</button>
               </div>
            </>
            )
        }
        return (
            <>
            <DataTable
                title="Categories"
                columns={columns}
                data={data}
                pagination={true}
                selectableRows
                Clicked
                onSelectedRowsChange={this.handleChange}
                Selected={this.handleChange}
            />
                {this.state.selectedCount > 0 ? <button type="button" onClick={this.handleDelete} className="input border border-black hover:bg-red-700 hover:text-white">Delete</button> : null}
                {this.state.selectedCount === 1 ? <button type="button" onClick={this.handleEdit} className="input border border-black hover:bg-green-700 hover:text-white">Edit</button> : null}
            </>
        )
    }
}

仅适用于该类别的标签不会被更新

PS：当我键入react时，我会在我键入的每个键上更新状态，然后react重新给我相同的标签，而不是新的状态，我也不知道为什么。 有人可以向我解释这个问题吗？