时间戳

首页 > 解决方案 > React - 如何将对象推送到嵌套在数组中的数组

javascript - React - 如何将对象推送到嵌套在数组中的数组

问题描述

我目前正在学习 React，所以如果我没有使用正确的术语，我深表歉意。

我正在创建一个具有多列的项目，每列都有一个“添加”按钮。此按钮弹出打开一个模式，用户可以在其中输入一串文本。然后我希望返回此文本字符串并将其显示在特定列中。我在尝试确定如何更新 setState 时遇到了麻烦，具体取决于我希望引用的列的索引。

我从模式返回列 ID，然后将该列 ID 与状态中设置的列的 ID 进行比较。我想知道如何获取我获得的列 [index] 并使用它在 addCard 方法中使用卡片对象更新卡片数组。

class Board extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false,
      columns: [
        {
          title: '',
          id: uuid(),
          cards: []
        },
        {
          title: '',
          id: uuid(),
          cards: []
        },
        {
          title: '',
          id: uuid(),
          cards: []
        }
      ],
      currentColumnID: null
    };
  }
  openModal = (colID) => {
    this.setState(state => {
      return {
        modalOpen: true,
        currentColumnID: colID
      };
    });
  };
  closeModal = () => {
    this.setState(state => {
      return {
        modalOpen: false
      };
    });
  };
  addCard = (cardValue) => {
    const card = {
      value: cardValue,
      id: uuid()
    };
    // compare column IDs to currentColumnID
    // return the index of whichever column is "true"
    const index = this.state.columns.map((column, i) => {     
      if(column.id === this.state.currentColumnID) {
        return i;
      }
    });

    // add card to returned column

    this.setState(state => {
      return {
        modalOpen: false
      };
    });
  };

标签： javascriptreactjs

解决方案

在你的addCard方法中。找到列，然后将卡片推入阵列。

addCard = (cardValue) => {
  const card = {
      value: cardValue,
      id: uuid()
  };

  // Find the column
  const column = this.state.columns.find(column => {
      return column.id === this.state.currentColumnID;
  })

  // add card to returned column
  if (column != null) {
      column.cards.push(card);
  }

  this.setState(state => {
      return {
          modalOpen: false
      };
  });
};

推荐阅读