javascript - 无法读取未定义的属性“列表” - 整个函数未定义

Question

我的错误消息告诉我，我试图调用的是未定义的，但不知道这怎么可能，因为在早期版本中，一切正常。

我有大学的网络开发教授试图帮助，以及高级设计助教

这是我们明天要介绍的团队的顶峰项目。

请，如果您知道为什么会发生这种情况，我们很乐意解决这个问题。

这是错误指向的地方：

特别是第 71 行（我将添加一个箭头）

import "./Board.css";

import React, {Component} from "react";
import { connect } from "react-redux";
import { DragDropContext, Droppable } from "react-beautiful-dnd";

import List from "./List";
import AddList from "./AddList";
//import Navbar from "./Navbar";

class Board extends Component {
  state = {
    addingList: false
  };

  toggleAddingList = () =>
      this.setState({addingList: !this.state.addingList});

  handleDragEnd = ({source, destination, type}) => {
    // dropped outside the allowed zones
    if (!destination) return;

    const {dispatch} = this.props;

    // Move list
    if (type === "COLUMN") {
      // Prevent update if nothing has changed
      if (source.index !== destination.index) {
        dispatch({
          type: "MOVE_LIST",
          payload: {
            oldListIndex: source.index,
            newListIndex: destination.index
          }
        });
      }
      return;
    }

    // Move card
    if (
        source.index !== destination.index ||
        source.droppableId !== destination.droppableId
    ) {
      dispatch({
        type: "MOVE_CARD",
        payload: {
          sourceListId: source.droppableId,
          destListId: destination.droppableId,
          oldCardIndex: source.index,
          newCardIndex: destination.index
        }
      });
    }
  };


  render() {
    console.log(this.props)
    const {board} = this.props;
    //console.log(board);
    const {addingList} = this.state;

    try {
      return (
          <DragDropContext onDragEnd={this.handleDragEnd}>
            <Droppable droppableId="board" direction="horizontal" type="COLUMN">
              {(provided, _snapshot) => (


                  <div className="Board" ref={provided.innerRef}>     <---------------------------------------

                    {board.lists.map((listId, index) => {
                      return <List listId={listId} key={listId} index={index}/>;
                    })}

                    {provided.placeholder}

                    <div className="Add-List">
                      {addingList ? (
                          <AddList toggleAddingList={this.toggleAddingList}/>
                      ) : (
                          <div
                              onClick={this.toggleAddingList}
                              className="Add-List-Button"
                          >
                            <ion-icon name="add"/>
                            Add a list
                          </div>
                      )}
                    </div>
                  </div>
              )}
            </Droppable>
          </DragDropContext>
      );

    } catch (error) {
      console.error(error.onmessage);
    }
  }
}
const mapStateToProps = state => ({ board: state.board });

export default connect(mapStateToProps)(Board);

感谢您为我们提供的任何见解。

标签： javascripthtmlcssreactjsmongodb