在javascript中將項添加到數組中

Question

承認它。 在2018年成為JavaScript新手很難。 來自C＃，Java和Typescript（是js的子集......）這樣的語言，其中類型安全是關鍵，Javascript只是讓我知道。 我喜歡更新數組這樣簡單的事情。

所以我有這個React組件，其狀態定義如下：

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      shoes: []
    };
  }
....
...
}

這是一個未定義的數組（？）

此數組傳遞給無狀態組件，如下所示

const Shoelist = props => {
  return (
    <Wrapper>
      {props.shoes.map((shoe, i) => (
        <div key={i}>
          <Shoe shoe={shoe} />
          <Separator />
        </div>
      ))}
    </Wrapper>
  );
};

我在我的Form組件中，我有一個方法應該對onClick方法做出反應（doh）。 在這個方法中，我得到一個參數，在這個列表中添加一個新鞋。 這是我在javascript中停下來的東西 - 這在我們過去幾年使用的所有其他語言中都很容易實現。

我嘗試了幾種方法：

1＃

 addShoe(shoe) {
        this.setState(state => {
          const list = state.shoes.push(shoe);
          return {
            list
          };
        });
      }

這會導致錯誤： Uncaught TypeError: Cannot read property 'push' of undefined我是否需要將鞋子定義為Array ？ 我認為[]就足夠了

2＃

我用谷歌搜索，我做了很多。 我找到了一篇關於react-addons-update博文。 我通過運行yarn add安裝它，代碼如下所示：

addShoe(shoe) {
    this.setState(update(this.state, { shoes: { $push: [shoe] } }));
  }

導致Uncaught Error: update(): expected target of $push to be an array; got undefined. Uncaught Error: update(): expected target of $push to be an array; got undefined.

救命！ 這有多難？

編輯

我將此方法傳遞給另一個組件，如下所示：

<ShoeModal onClose={this.addShoe} />

在ShoeModal組件中，這綁定到onClick方法：

<FinishModalButton
          onClick={this.props.onClose.bind(this, this.state.shoe)}>
....
</FinishModalButton>

ShoeModal.propTypes = {
  onClose: PropTypes.func.isRequired
};

Answer 1

你可以這樣做：

this.setState({
     shoes: [...this.state.shoes, newShoe]
})

...添加this.state.shoes所有元素

Answer 2

通過您的更新，我們可以看到問題是addShoe回調傳遞的方式。 它被作為函數而不是對象的方法調用，因此它會丟失上下文。

將其更改為：

<ShoeModal onClose={this.addShoe.bind(this)} />

要么

<ShoeModal onClose={shoe => this.addShoe(shoe)} />

另外， .push返回數組的計數，因此以下行不會給出您期望的內容：

const list = state.shoes.push(shoe);

請參閱@ merko的答案以獲得解決方案。

Answer 3

首先，你的addShoe方法不是箭頭函數。 使用箭頭函數，因為this是組件的上下文。

其次，您將返回對象{list} 。 這將變量list設置為state。 同時推送到新list變量而不是變異狀態。 將您的功能更改為

addShoe = (shoe) => {
    this.setState(state => {
      let list = state.shoes;
      list.push(shoe);
      return {
        shoes : list
      };
    });
  }