React-如何將對象推入嵌套在數組中的數組

Question

我目前正在學習React，所以如果我使用的術語不正確，我深表歉意。

我正在創建一個具有多個列的項目，每個列都有一個“添加”按鈕。 彈出該按鈕可打開模式框，用戶可以在其中輸入文本字符串。 然后，我希望返回此字符串，並將其顯示在特定的列中。 根據我要引用的列的索引，嘗試確定如何更新setState時遇到了麻煩。

我從模態返回列ID，然后將該列ID與狀態中設置的列ID進行比較。 我想知道如何獲取已獲取的column [index]並使用它來使用addCard方法中的card對象更新cards數組。

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

Answer 1

在您的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
      };
  });
};

Answer 2

您可以在setState中直接進行管理。

addCard = cardValue => {
    const card = {
      value: cardValue,
      id: uuid()
    };
    this.setState(prevState => ({
      columns: prevState.columns.map(column => ({
        ...column,
        cards: column.id === prevState.currentColumnID ? [...column.cards, card] : column.cards
      })),
      modalOpen: false
    }))
  };