[英]reactjs - having some issues with my functions to update state and using promises
[英]I want to update my state using an imported functions as my datastore
我想更新我的状态,但使用 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 });
}}
>
)
}
updatedItem(id, property) {
this.list = this.list.map((element) => {
if (element.id === id) {
element = { ...element, ...property };
}
return element;
});
return this.list;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.