【问题标题】:React-Native setState - both name and value from the same variableReact-Native setState - 来自同一个变量的名称和值
【发布时间】:2019-04-12 01:34:38
【问题描述】:

是否可以只向 SetState 输入一个包含名称和值的参数。请参见下面的示例。括号有问题吗?

这在同时改变很多状态时会很方便。也就是说,首先将它们准备在一个长字符串中,并且只执行一次 setState。谢谢!

this.setState({myState: "help"}) // this works of course
whatstate='myState'
this.setState({[whatstate]: "me"}) // this too
whatstate2='myState: "please"' 
this.setState(whatstate2) // but how to make this work?

【问题讨论】:

  • whatstate2 必须是一个对象,您不能只传递原始 int 或类似的东西
  • 正如 Ortho 所说,它应该是一个对象。将 whatstate2 放在大括号内。 this.setState({whatstate2})
  • 不幸的是,this.setState({ whatstate2 }) 不起作用。此外,如果我键入 this.setState({ 'myState: "fdfdf"' }),Visual Studio Code 会用红色在右大括号下划线 - 表明它不太正确。我明白为什么大括号需要在那里,但也许还有其他问题。

标签: javascript react-native setstate


【解决方案1】:
// if you like to work only with strings
var whatstate = {};
whatstate['myState1'] = 'help';
whatstate['myState2'] = 'me';
whatstate['myState3'] = 'please';

// ^ this will produce an object equivalent to this
//whatstate = {
//  myState1: 'help',
//  myState2: 'me',
//  myState3: 'please'
//}

// which you can use it to 'setState'
this.setState(whatstate);

【讨论】:

    【解决方案2】:

    您可以拨打this.setState({ whatstate2 }) 来达到同样的效果。这是 ES6 中的属性值简写。

    参考:https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand

    如果您想一次性更新多个状态,也可以这样做。

    this.setState({
        myState1 : newState1,
        myState2 : newState2
    });
    

    如果变量名与前面提到的状态名相同,可以这样做。

    this.setState({ myState1, myState2 });
    

    【讨论】:

    • 不幸的是,this.setState({ whatstate2 }) 不起作用。此外,如果我键入 this.setState({ 'myState: "fdfdf"' }),Visual Studio Code 会用红色在右大括号下划线 - 表明它不太正确。我明白为什么大括号需要在那里,但也许还有其他问题。
    • 你能解释一下“不工作”是什么意思吗?如果您有一个名为whatstate2 的有效变量,并且您还有一个名为whatstate2 的状态。这个setState 会起作用。但是,如果您的州名是myState,则需要一个同名的变量myState
    • 如果变量名是状态名,它确实有效。谢谢!但是,我想使用一个 setState 命令更改多个状态,例如 changeeverything= 'myState1: "help", myState2: "me"'。我想知道这是否可能。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-08-21
    • 1970-01-01
    • 1970-01-01
    • 2022-12-14
    • 1970-01-01
    • 1970-01-01
    • 2021-05-18
    相关资源
    最近更新 更多