React Native：无法使用 this.setState() 在二维数组中设置变量，但 this.state.x= 有效

Question

我有一个二维对象数组，其中 key/value 对作为状态变量，我正在尝试使用推荐的 setting/changing 状态变量方式，即使用 this.setState({x:y}) 而不是直接使用 this.state.x = y 然后 forceUpdate() 设置它。但是，当我尝试这样做时，它给了我一个 "unexpected token" 错误。

我基本上想将变量从一种状态翻转到另一种状态，所以我使用了三元运算符。此代码有效

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[=17= 中的嵌套对象内的键值]

这不是 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();

（首选第一种方法，但需要安装 underscore 或 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() 在二维数组中设置变量，但 this.state.x= 有效

React Native: Can't use this.setState() to set a variable inside a 2D array, but this.state.x= works

react-native