Question

接受。在2018年成为JavaScript新手很难。来自诸如C＃，Java和Typescript（是js..yeah子集）之类的语言，其中类型安全性是关键，Java语言只是使我烦恼不已。我在尝试一些简单的事情，例如更新数组。

所以我有这个React组件，其状态定义如下：

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

鞋子是undefined（？）的数组

此数组传递给一个看起来像这样的无状态组件

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

我在Form组件中，有一个方法应该对onClick方法做出反应。在这种方法中，我得到了一个带有新鞋子的参数以添加到此列表中。这对我来说，在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.

帮助！这有多难？

编辑

我将此方法传递给另一个这样的组件：

<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设置为状态。另外，请推送至新的list变量，而不要更改状态。将功能更改为

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

在JavaScript中将项目添加到数组

3 个答案: