Question

我有一个带有键/值对的2D对象数组作为状态变量，我尝试使用推荐的设置/更改状态变量的方法，即使用this.setState({x:y})代替使用this.state.x = y然后forceUpdate()直接设置它。但是，当我尝试这样做时，它会给我一个＆＃34;意外的令牌＆＃34;错误。

我基本上想要将变量从一个状态转换到另一个状态，因此我使用三元运算符。此代码有效

toggleBookmark(category, index) {   
    this.state.menuItems[category][index].bmIcon = (this.state.menuItems[category][index].bmIcon === "bookmark-o") ? "bookmark" : "bookmark-o";
}

这段代码，我希望做同样的事情，给出错误

toggleBookmark(category, index) {   
    this.setState({menuItems[category][index].bmIcon: (this.state.menuItems[category][index].bmIcon === "bookmark-o") ? "bookmark" : "bookmark-o"});
}

我认为它可能是三元运算符，所以我将值放入变量并尝试使用该变量设置状态变量，但它仍然会产生相同的错误。

toggleBookmark(category, index) {
    var iconText = (this.state.menuItems[category][index].bmIcon === "bookmark-o") ? "bookmark" : "bookmark-o";
    this.setState({menuItems[category][index].bmIcon: iconText});
}

我做错了吗？我想用setState()做什么？

Answer 1

在Javascript中，在内联创建该对象时，不能将表达式用作对象的键。

这里的问题是你已经完成{menuItems[category][index].bmIcon: iconText}会引发语法错误。

如果您想快速解决此问题，可以先创建对象，然后将值分配给该键，如下所示：

var state = {}; state[menuItems[category][index].bmIcon] = iconText; this.setState(state);

值得注意的是，ES6为此提供了糖，这里还有另一个答案可能提供更多见解 How do I create a dynamic key to be added to a JavaScript object variable

<强>更新

我现在看到你的意思了，我之前认为menuItems已经定义了，但你想要做的是改变this.state

中嵌套对象内部键的值

React并不是真正构建的，你应该保持你的状态相对简单，并为每个菜单项制作单独的React组件，然后让它们管理自己的状态。我强烈推荐这种方法，因为它可以使您的代码保持干净和健壮。不要害怕制作更多组件！

但是，如果您确实希望将所有这些嵌套状态保留在一个组件中（不建议），那么您应首先制作要setState的对象的副本。

var newMenuItems = _.clone(this.state.menuItems);
var iconText = (this.state.menuItems[category][index].bmIcon === "bookmark-o") ? "bookmark" : "bookmark-o";
newMenuItems[category][index].bmIcon = iconText;

this.setState({ menuItems: newMenuItems });

或

var iconText = (this.state.menuItems[category][index].bmIcon === "bookmark-o") ? "bookmark" : "bookmark-o"; this.state.menuItems[category][index].bmIcon = iconText; this.forceUpdate();

（首选方法，但需要安装下划线或lodash之类的东西）

Answer 2

我有数据聊天：

chat: {
        id: 'ss3k5e6j1-6shhd6-sdasd3d3-23d5-gh67',
        agentName: 'egaliciar',
        agentAvatar: 'http://i.imgur.com/DY6gND0.png',
        messages: [
          {
            id: 1,
            lines: [
              'Me pueden ayudar?',
              'Tengo problemas con mis boletos',
              'Hola buen dia...',
            ],
            time: '17:20',
          },
          {
            id: 2,
            lines: ['¿Me podria regalar su nombres', 'Con gusto...'],
            time: '17:22',
            date: '23/ene/2012',
          },
        ],
      },
    };

当我做的时候

const oldLines =Object.assign({}, this.state.chat);
    oldLines.messages[0].lines.push('newValue');

我的州改变了.....没有this.setState（{}）;

我做了克隆;

var clone = JSON.parse(JSON.stringify(this.state.chat)); 
        clone.messages[0].lines.push('new Value');

和国家保持他们的状态; 因此，完整的解决方案适合我：

var clone = JSON.parse(JSON.stringify(this.state.chat)); 
        clone.messages[0].lines.push(questionAreaMessage); //the state maintains
        this.setState({chat:clone}); //here the State change!!!!

React Native：不能使用this.setState（）在2D数组中设置变量，但this.state.x =有效

2 个答案: