ReactJS-TypeError：this.state.items.map不是一个函数

如何解决ReactJS-TypeError：this.state.items.map不是一个函数

作为初学者，我将在ReactJS中创建我的第一个项目（具有拖放功能的待办事项列表，添加，删除和编辑）。我正在尝试映射数组，但是在提交文本时出现此错误，并且代码应将该项目放入items数组。

如果列表中还没有项目，则只有用户窗体和输入字段，用户可以在其中输入任何字符串，这将是用户界面：

这是提交值后的错误：

这是我的当前源代码（App.js）：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],//This is the items array 
      currentItem: {
        text: "",key: "",},};
    this.handleInput = this.handleInput.bind(this);
    this.addItem = this.addItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.setUpdate = this.setUpdate.bind(this);
  }

  handleInput(e) {
    this.setState({
      currentItem: {
        text: e.target.value,key: Date.Now(),});
  }

  addItem(e) {
    e.preventDefault();
    const newItem = this.state.currentItem;
    console.log(newItem);
    if (newItem !== "") {
      const items = [...this.state.items,newItem];
      this.setState({
        items: newItem,currentItem: {
          text: "",});
    }
  }

  deleteItem(key) {
    const filteredItems = this.state.items.filter((item) => item.key !== key);
    this.setState({
      items: filteredItems,});
  }
  setUpdate(text,key) {
    console.log("items:" + this.state.items);
    const items = this.state.items;
    items.map((item) => {
      if (item.key === key) {
        console.log(item.key + "    " + key);
        item.text = text;
      }
    });
    this.setState({
      items: items,});
  }

  render() {
    return (
      <div className="App">
        <DragDropContext
          onDragEnd={(param) => {
            const srcI = param.source.index;
            const desI = param.destination?.index;
            if (desI) {
              this.items.splice(desI,this.items.splice(srcI,1)[0]);
              List.saveList(this.items);
            }
          }}
        >
          <ListContainer>
            <h1>To Do List</h1>
            <form id="to-do-form" onSubmit={this.addItem}>
              <input
                type="text"
                placeholder="Enter Task"
                value={this.state.currentItem.text}
                onChange={this.handleInput}
              />
              <button type="submit"> Add </button>
            </form>
            <Droppable droppableId="droppable-1">
              {(provided,_) => (
                <div ref={provided.innerRef} {...provided.droppableProps}>
                  {this.state.items.map((item,i) => (
                    <Draggable
                      key={item.id}
                      draggableId={"draggable-" + item.id}
                      index={i}
                    >
                      {(provided,snapshot) => (
                        <ListItem
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          style={{
                            ...provided.draggableProps.style,BoxShadow: snapshot.isDragging
                              ? "0 0 .4rem #666"
                              : "none",}}
                        >
                          <DragHandle {...provided.dragHandleProps} />
                          <span>{item.title}</span>
                        </ListItem>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </ListContainer>
        </DragDropContext>
      </div>
    );
  }
}

如何解决此问题？我已经在构造函数内部的代码顶部声明了items。它说.map()仅用于数组，基于我发现的与此错误相关的其他问题，他们在字符串而不是数组中使用.map()，但是在我的问题场景中明确指出items已被定义为数组。

解决方法

您在addItem方法中犯了一个错误。您需要使用items键而不是新的项目字符串来保存项目数组。因此，将该功能更改为

addItem(e) {
    e.preventDefault();
    const newItem = this.state.currentItem;
    console.log(newItem);
    if (newItem !== "") {
      const items = [...this.state.items,newItem];
      this.setState({
        items: items,// or just items,currentItem: {
          text: "",key: "",},});
    }
  }