Question

我正在使用React创建一个页面构建器。

我有一个包含页面结构的组件。

var LayoutPage = React.createClass({

getInitialState: function getInitialState() {
    return {
      items: {
          '78919613':{
              id: '78919613',
              component : 'OneColumn',
              cols:{
                  '565920458':{
                      id: '565920458',
                      content:{
                          '788062489':{
                              id: '788062489',
                              component : 'Text',
                              params: 'Lorem ipsum'
                           },
                           '640002213':{
                              id: '640002213',
                              component : 'Text',
                              params: 'Lorem ipsum'
                           }
                      }
                   }
               }
           }
        }
    };
},
.....
});

我有一个拖放系统，可以在页面上放置一个新元素，并且它可以工作。但是当删除新元素时，我想更新状态以在数组中添加新项。

那么我怎样才能推出新商品？我做了一个测试：

this.state.items.push({.....});

但我有一个错误：

TypeError: this.state.items.push is not a function

你能帮助我吗？

谢谢。

Answer 1

您应该将其更改为数组，而不是使用您所在州的对象：

    this.state = {
        items: [ // items array
        {
          id: 1,
          name: "Stack"
        },
        {
          id: 2,
          name: "Overflow"
        }],
        count: 3,  // another state
        textValue : ''  // and this is state too
    }

其中项目是一组对象。然后，您将能够向数组中添加新项目。

const newItem = {
    id : this.state.count,
  name: this.state.textValue
};
const newArr = this.state.items.concat(newItem);
this.setState({
    items: newArr,
    textValue: '',
    count: this.state.count + 1
})

整个示例是 here 。

我希望它会对你有所帮助！

由于

Answer 2

如果您直接改变应用程序的状态，您将开始感到头痛。如果您忘记拨打this.setState，则不会重新呈现！

假设您不能使用数组（这会更容易），那么如果您想要向对象添加另一个项目，则必须生成唯一键。

// create a new copy of items based on the current state
var newItems = Object.assign({}, this.state.items),
    newItem = { id: '', component: '', cols: {} },
    uniqueId = generateUniqueId();

// safely mutate the copy
newItems[uniqueId] = newItem;

// update the items property in state
this.setState({ items: newItems });

使用ES7/Babel可以更轻松。

const newItem = { id: '', component: '', cols: {} },
      uniqueId = generateUniqueId(),
      items = { [uniqueId]: newItem, ...this.state.items };

this.setState({ items });

您可以使用Math.random生成类似的唯一ID。

function generateUniqueId() {
  // removing leading '0.' from number
  return Math.random()
    .toString()
    .slice(3);
}

ReactJs - 如何更新数组中的状态？

2 个答案: