Question

我创建了一个React应用程序，它的工作只有一件事困扰着我。当我点击添加项目时，它会转到右侧页面，列出添加的项目。但是我必须刷新这个新页面以向列表中显示添加的项目。此外，在该列表页面中，当我点击删除按钮时，弹出一个模态，当我点击模态中的删除按钮时，它不会删除该项目。我必须刷新页面然后删除该项目！我希望，一旦我点击删除，模态就会消失并且项目被删除。我的代码在这里： IndexItem.js

import React, { Component } from 'react';
import ItemService from './ItemService';
import axios from 'axios';
import TableRow from './TableRow';

        class IndexItem extends Component {

          constructor(props) {
              super(props);
              this.state = {value: '', items: ''};
              this.addItemService = new ItemService();
            }
            componentWillMount(){
              axios.get('http://localhost:4200/items')
              .then(response => {
                this.setState({ items: response.data });
              })
              .catch(function (error) {
                console.log(error);
              })
            }
            tabRow(){
              if(this.state.items instanceof Array){
                return this.state.items.map(function(object, i){
                    return <TableRow obj={object} key={i} />;
                })
              }
            }

            render() {
              return (
                <div className="container">
                    <table className="table table-striped">
                      <thead>
                        <tr>
                          <td>Student ID</td>
                          <td>Student Name</td>
                        </tr>
                      </thead>
                      <tbody>
                        {this.tabRow()}
                      </tbody>
                    </table>
                </div>
              );
            }
          }

        export default IndexItem;

        class TableRow extends Component {

          constructor(props) {
              super(props);
              this.addItemService = new ItemService();
              this.state = {isOpen: false}; 
          }

          toggleModal = () => {
            this.setState({
              isOpen: !this.state.isOpen
            });
          }


          render() {
            return (
                <tr>
                  <td>
                    {this.props.obj._id}
                  </td>
                  <td>
                    {this.props.obj.item}
                  </td>
                  <td>
                  <Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Edit</Link>
                </td>
                  <td>
                  <button onClick={this.toggleModal}>
                    Delete
                  </button>
                    <ModalItem
                      show={this.state.isOpen}
                      obj={this.props.obj}
                      onClose={this.toggleModal}>
                    </ModalItem>

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

        export default TableRow;

        import React from 'react';
        import { Link } from 'react-router-dom';
        import PropTypes from 'prop-types';
        import {Modal, Button} from 'react-bootstrap';

         import Item Service from './ItemService';
            class Modaltem extends React.Component {
              constructor(props) {
                super(props);
                this.addItemService = new ItemService();
                this.handleSubmit = this.handleSubmit.bind(this);
              }

              handleSubmit(event) {  
                event.preventDefault();
                this.addItemService.deleteData(this.props.obj._id);
              }
              render() {
                // Render nothing if the "show" prop is false
                if (!this.props.show) {
                  return null;
                }
                else {
                  return (
                    <div className="static-modal">
                      <Modal.Dialog>
                        <Modal.Header>
                          <Modal.Title>Ready to Delete Student</Modal.Title>
                        </Modal.Header>

                        <Modal.Body>Are you sure you want to delete this Student?</Modal.Body>

                        <Modal.Footer>
                          <Button onClick={this.props.onClose}>Close</Button>
                          <form onSubmit={this.handleSubmit}>
                            <input type="submit" value="Delete" className="btn btn-danger" />
                          </form>

                        </Modal.Footer>
                      </Modal.Dialog>
                    </div>
                  );
                }
              }
            }
            }

            export default ModalItem;

        import App from './App';
        import AddItem from './components/AddItem';
        import IndexItem from './components/IndexItem';
        import EditItem from './components/EditItem';

        ReactDOM.render(
          <Router>
              <div>
                <Route exact path='/' component={App} />
                <Route path='/add-item' component={AddItem} />
                <Route path='/index' component={IndexItem} />
                <Route path='/edit/:id' component={EditItem} />
              </div>
          </Router>,
          document.getElementById('root')

    ItemService.js file

        import axios from 'axios';

        class ItemService {

          sendData(data) {
            axios.post('http://localhost:4200/items/add/post', {
              item: data
            })
            .then(res => this.setState({ items: res.data }))
            .catch(err => console.log(err))
          }

          updateData(data, id){
            axios.post('http://localhost:4200/items/update/'+id, {
              item: data
            })
            .then(res => this.setState({ items: res.data }))
            .catch(err => console.log(err))
          }

          deleteData(id){
            axios.get('http://localhost:4200/items/delete/'+id)
            .then().catch(err => console.log(err))
          }
        }

        export default ItemService;

Answer 1

根据您提供的代码，内容未更新的原因是您没有使用更改的项目列表调用 setState函数。在该组件的状态发生更改之前，React不会重新呈现。

React App需要刷新更新

1 个答案: