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