我想使用導入的函數作為我的數據存儲更新我的狀態

Question

我想更新我的狀態，但使用 js 文件中的函數作為我的數據存儲：這是我的函數：

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

    fetchItems() {
     return this.list;
       }

這是我的反應代碼：

  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),
      });
      }

這就是我渲染它們的方式 我這里沒有所有代碼，因為有些我認為它沒有必要，但我無法在這里確定我的問題警告“警告：列表中的每個孩子都應該有一個唯一的“關鍵”道具。 ：

   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;
     }