Question

我是新手。我正在从函数 Read() 中检索数据并以表格的形式显示它。我想编辑和删除数据。我面临的问题是：-

我将 Axios 响应存储到状态变量中并将其映射到表中。我有每一行的编辑和删除图标。我可以删除该行，删除该行后，我调用 Read() 函数来检索数据（因为删除了一行）并且它更新了新数据，表中没有任何问题。

但是状态变量仍然持有旧数据，当点击Empedit（子组件）时仍然持有旧数据。

注意： - 我不想刷新页面，它必须在不加载页面的情况下显示

class empData extends React.Component {

    constructor(props) {

        super(props);
        this.read = this.read.bind(this);
        this.state = {
            empList:[]
        }
        
    read(){
        
        const readData = axios.get('api/readEmp');
        axios.all([readData]).then(function (response) {     
            this.setState({
                empList: response[0].data,
                
            });
        })
    }

    delete(empId){

        axios.get('api/empDelete/${empId}').then(json => {
            if (json.data) {              
                this.read();
            }
        });     
    }


    empTableList(){
        
        return(
            this.state.empList.map(item =>(

            <tr>
                <td>{item.firstName}</td>
                <td>{item.lastName}</td>
                <td>
    
                    <Empedit  read={this.read}   emp = {item}/>                 
                    <button onClick={this.delete({item.id}) } value="delete"/>

                </td>
            </tr>
            ))
        )
    }

    render(){
        return(
            <table>
                <th>
                    <tr>
                    <td> First Name </td>
                    <td> last Name </td>                                    
                    <td> Operate </td>                                    
                    </tr>
                </th>
            <tbody>
                {this.empTableList()}
            </tbody>

        )
    }
}
export default (empData);

访问更新的状态变量 React

0 个答案: