未捕获的类型错误：无法读取未定义的属性（读取“绑定”）

Question

我正在尝试开发能够拖动多个 div 并将其组合为一个（其中的内容）并将其放入另一列的功能。在尝试这样做时，我进行了功能检查，该检查基本上确定应该更改哪个 div 以及它是否被合并。我在我的州设置值时收到此错误。我尝试了几种方法，但它以某种方式显示了这个错误。这将作为道具传递给另一个子组件。可以请他找出问题所在。

提前致谢。

const finalValueUpdate = (
  finalValue, 
  task, 
  column, 
  selectedTaskIds, 
  tasks) => {
  if (finalValue === false && column.id == 'done') {
    console.log('check1');
    this.setState({ bigFinalValue: task.word }).bind(this);
  }
  else if(
    column.id == 'done' && 
    selectedTaskIds.length > 1 && 
    typeof bigFinalValue !== 'undefined') {
    console.log('check2');
    tasks.map((task, index) => {
      if(selectedTaskIds.includes(task.id)) {
        this.bigFinalValue += task.word + ' ';
        }
      })
  }

}

export default class Column extends Component<Props> {
  state = {
    selectedTaskIds: this.props.selectedTaskIds,
    finalValue: this.props.finalValue,
    bigFinalValue: '',
  };


  componentDidUpdate(prevProps: Props) {
    if (prevProps.selectedTaskIds !== this.props.selectedTaskIds) {
      this.setState({ selectedTaskIds: this.props.selectedTaskIds });
    }
  };


  render() {
    const column = this.props.column;
    const tasks = this.props.tasks;
    const selectedTaskIds = this.props.selectedTaskIds;
    const draggingTaskId = this.props.draggingTaskId;
    const finalValue = this.props.finalValue;
    
    return (
      <Container>
        <Title>{column.title}</Title>
        <Droppable droppableId={column.id} isCombineEnabled={true}>
          {(provided, snapshot) => (
            <TaskList
              ref={provided.innerRef}
              isDraggingOver={snapshot.isDraggingOver}
              {...provided.droppableProps}
            >
              {tasks.map((task, index) => {
                const isSelected = Boolean(
                  getSelectedMap(selectedTaskIds)[task.id]
                );
                const isGhosting =
                  isSelected &&
                  Boolean(draggingTaskId) &&
                  draggingTaskId !== task.id;
                

                if (finalValue === false && column.id == 'done') {
                  console.log('check1');
                  this.setState({ bigFinalValue: task.word }).bind(this);
                  console.log(this.state.bigFinalValue);
                }
                else if(
                  column.id == 'done' && 
                  selectedTaskIds.length > 1 && 
                  typeof bigFinalValue !== 'undefined') {
                  console.log('check2');
                  tasks.map((task, index) => {
                    if(selectedTaskIds.includes(task.id)) {
                      this.bigFinalValue += task.word + ' ';
                      }
                    })
                } 

                console.log("selectedTaskIds", selectedTaskIds);
                console.log('finalValue', finalValue);
                console.log('bigFinalValue', this.bigFinalValue);
                // for the console log of data incoming from the server
                console.log("==>", tasks);

                return (
                  <Task
                    task={task}
                    columnId = {this.props.column.id}
                    index={index}
                    key={task.id}
                    selectedTaskArray = {tasks}
                    finalValue = {finalValue}
                    isSelected={isSelected}
                    isGhosting={isGhosting}
                    selectionCount={selectedTaskIds.length}
                    selectedTaskIds={selectedTaskIds}
                    bigFinalValue = {this.bigFinalValue}
                    toggleSelection={this.props.toggleSelection}
                    toggleSelectionInGroup={this.props.toggleSelectionInGroup}
                    multiSelectTo={this.props.multiSelectTo}
                  />
                );
              })}
              {provided.placeholder}
            </TaskList>
          )}
        </Droppable>
      </Container>
    );
  }
}

Answer 1

我不擅长类组件，我建议您使用功能组件，它可能会解决您的问题，但我认为问题是这一行

this.setState({ bigFinalValue: task.word }).bind(this);

我不知道为什么它会抛出此错误，但尝试使用功能组件并更新状态在 useEffect 挂钩中。