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

Question

I am creating my first project (To-Do List with drag and drop feature, add, delete and edit) in ReactJS as a beginner. I am trying to map an array but this error shows up when I am submitting a text and the code should put the item into the items array.

This will be the UI if there's no item yet in the list only a form and an input field where the user will input any string:

And here's the error after submitting the value:

Here's my current source code ( 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: "",
          key: "",
        },
      });
    }
  }

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

How to fix this problem? I already declared items in the top of the code inside the constructor. It sayd that the .map() is for arrays only and based on the other problems I found related to this error they are using .map() in a string instead of an array but in my problem scenario it is clearly stated that items is already defined as an array.

Answer 1

You have made a mistake in addItem method. You need to save array of Items against items key not the new item string. So change that function to

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