使用npm uuid包进行React 16表数据更新操作不会更新行数据

Question

我正面临反应表格更新挑战。当我更新一行时，会创建一个新条目。我发现问题是我需要创建唯一的键/ id来跟踪行id.i建议使用uuid package https://www.npmjs.com/package/uuid。导入此包后我传递了这个uuid()在handlesubmit功能，仍然没有按预期工作。在幕后失踪或发生什么？这里是现场演示live demoThanks。

import React, { Component } from "react";
import {
  Form,
  FormGroup,
  //ControlLabel,
  FormControl,
  Col,
  Button,
  // PageHeader,
  Row,
  Grid,
  Modal,
  ButtonToolbar,
  Table
} from "react-bootstrap";
let uuidv4 = require("uuid/v4");
//const Dashboard = ({ email }) => (

class Dashboard extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      description: "",
      amount: "",
      date: "",
      show: false,
      formdata: []
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
    this.showEditModal = this.showEditModal.bind(this);
  }

  showModal() {
    this.setState({ show: true });
  }

  showEditModal(event, i) {
    const recordToEdit = this.state.formdata.filter((item, index) => {
      return index === i;
    })[0];

    this.setState({
      show: true,
      name: recordToEdit.name,
      description: recordToEdit.description,
      amount: recordToEdit.amount,
      date: recordToEdit.date
    });
  }

  hideModal() {
    this.setState({
      show: false,
      name: "",
      description: "",
      amount: "",
      date: ""
    });
  }

  handleInputChange(event) {
    // update the input that changed
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  handleSubmit(event) {
    const formItem = {
      id: this.state.id,
      name: this.state.name,
      description: this.state.description,
      amount: this.state.amount,
      date: this.state.date
    };

    if (
      this.state.name === "" ||
      this.state.amount === "" ||
      this.state.date === ""
    ) {
      alert("Please fill mandatory filed");
    } else {
      if (
        this.state.formdata.filter(item => item.id === formItem.id).length > 0
      ) {
        // update item
        this.setState(prevState => ({
          formdata: prevState.formdata.map(item => {
            if (item.name === formItem.name) return formItem;
            else return item;
          })
        }));
      } else {
        // add new item
        this.setState((prevState,id) => ({
          formdata: prevState.formdata.concat(formItem)
        }));
      }

      alert("form submited: ");

      this.setState({
        name: "",
        description: "",
        amount: "",
        date: ""
      });
    }
    event.preventDefault();
  }

  deleteExpense(i) {
    alert("are you sure you want to Delete this item ?");
    this.setState({
      formdata: this.state.formdata.filter((item, index) => {
        return index !== i;
      })
    });
  }

  render() {
    return (
      <Grid>
        <p>Welcome</p>
        <Row>
          <Col>
            <ButtonToolbar>
              <Button bsStyle="primary" onClick={this.showModal}>
                Add Expenses
              </Button>
              <Table striped bordered condensed hover>
                <thead>
                  <tr>
                    <th>name</th>
                    <th>description</th>
                    <th>amount</th>
                    <th>date</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.formdata.map((item, i) => (
                    <tr key={i}>
                      <td>{item.name}</td>
                      <td>{item.description}</td>
                      <td>{item.amount}</td>
                      <td>{item.date}</td>
                      <td>
                        <Button
                          bsStyle="warning"
                          onClick={e => this.showEditModal(e, i)}
                        >
                          Update
                        </Button>
                        <Button
                          bsStyle="danger"
                          onClick={() => this.deleteExpense(i)}
                        >
                          Delete
                        </Button>
                      </td>
                      <td />
                    </tr>
                  ))}
                </tbody>
              </Table>
              <Modal
                {...this.props}
                show={this.state.show}
                onHide={this.hideModal}
                dialogClassName="custom-modal"
              >
                <Modal.Header closeButton>
                  <Modal.Title
                    id="contained-modal-title-lg "
                    className="text-center"
                  >
                    Add Expenses
                  </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                  <Form horizontal onSubmit={this.handleSubmit}>
                    <FormGroup controlId="formHorizontalEmail">
                      <Col smOffset={4} sm={4}>
                        <FormControl
                          type="Text"
                          placeholder="name"
                          name="name"
                          value={this.state.name}
                          onChange={this.handleInputChange}
                        />
                      </Col>
                    </FormGroup>
                    <FormGroup controlId="formHorizontalPassword">
                      <Col smOffset={4} sm={4}>
                        <FormControl
                          type="description"
                          placeholder="description"
                          name="description"
                          value={this.state.description}
                          onChange={this.handleInputChange}
                        />
                      </Col>
                    </FormGroup>
                    <FormGroup controlId="formHorizontalPassword">
                      <Col smOffset={4} sm={4}>
                        <FormControl
                          type="amount"
                          placeholder="amount"
                          name="amount"
                          value={this.state.amount}
                          onChange={this.handleInputChange}
                        />
                      </Col>
                    </FormGroup>
                    <FormGroup controlId="formHorizontalPassword">
                      <Col smOffset={4} sm={4}>
                        <FormControl
                          type="date"
                          placeholder="date"
                          name="date"
                          value={this.state.date}
                          onChange={this.handleInputChange}
                        />
                      </Col>
                    </FormGroup>

                    <FormGroup>
                      <Col smOffset={5} sm={4}>
                        <Button type="submit" bsStyle="primary">
                          Add
                        </Button>
                      </Col>
                    </FormGroup>
                  </Form>
                </Modal.Body>
              </Modal>
            </ButtonToolbar>
          </Col>
        </Row>
      </Grid>
    );
  }
}
export default Dashboard;

Answer 1

let uuidv4 = require("uuid/v4");

在这一行之后，我没有看到你使用uuidv4的任何地方，使用它，只是简单的uuidv4()，你可以用console.log(uuidv4());测试它

简单地说，让每个键都使用uuid

<tr key={uuidv4()}>