我想使用导入的函数作为我的数据存储更新我的状态

Question

I want to update my state but using a functions in a js file as my data store : this is my function:

   updatedItem(id, property) {
        this.list = this.list.map(
  (element) => element.id === id && { ...element, ...property }
     );
     }

    fetchItems() {
     return this.list;
       }

and this is my react code:

  import React, { Component } from "react";
  import "./App.css";
  import Edit from "./assets/edit.svg";
  import Delete from "./assets/delete.svg";

  const lists = require("./datastore.js");

  export default class TodoListChuva extends Component {
  constructor(props) {
  super(props);
  const todos = new lists([]);
  this.state = {
  items: todos,
  currentItems: {
    description: "",
    id: "",
    isEditable: false,
  },
  errorMsg: "",
  isEditable: false,
  editInput: {
    description: "",
    id: "",
  },
  };


    this.handleInput = this.handleInput.bind(this);
    this.handleEditInput = this.handleEditInput.bind(this);
    this.handleUpdateItem = this.handleUpdateItem.bind(this);


      handleInput(input) {
        this.setState({
        ...this.state,
        currentItems: {
        description: input,
        id: Date.now(),
        isEditable: false,
          },
          });
          }



       handleEditInput(input, id) {
         this.setState({
         ...this.state,
         editInput: {
         description: input,
         id: id,
            },
            });
            }

      //update item
      handleUpdateItem(id, property) {
      this.setState({
      ...this.state,
      ...this.state.items.updatedItem(id, property),
      });
      }

this is how im rendering them i dont have all the code in here beacause some i thing it not necessary but i cant identify my problem in here i click to update in my update button it erase the content from the other one and then gives me this warning "Warning: Each child in a list should have a unique "key" prop." :

   render(){
   return(


         <ul className="list">
        {this.state.items.fetchItems() !== undefined &&
          this.state.items.fetchItems().map((item) => (
            <li className="listItem" key={item.id}>
              {!item.isEditable ? (
                <p>{item.description}</p>
              ) : (
                <input
                  type="text"
                  value={
                    this.state.editInput.description.length > 0
                      ? this.state.editInput.description
                      : item.description
                  }
                  onChange={(e) =>
                    this.handleEditInput(e.currentTarget.value, item.id)
                  }
                />
              )}
              <span>
                <button
                  type="button"
                  onClick={() => {
                    this.handleUpdateItem(item.id, { isEditable: true });
                  }}
                >

      )
    }

Answer 1

  updatedItem(id, property) {
     this.list = this.list.map((element) => {
     if (element.id === id) {
     element = { ...element, ...property };
     }
     return element;
    });

     return this.list;
     }