Question

我正在尝试使用setState onPress更新布尔值。根据所按下的按钮，其他布尔值将分别设置为false或true。

代码：

export default class SettingsScreen extends React.Component {
  constructor(){
    super();
    this.state = {
      isMeat: true,
      isVegan: false,
      isVegetarian: false,
    }
  }  

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.menuTop}>
          <MenuButton navigation = {this.props.navigation} />
          <Text style={styles.menuText}>Settings</Text>
        </View>
        <View style = {styles.body}>
            <Button title="make it vegan!"
                    style = {styles.vegan}
                    onPress = {()=> {
                      this.setState({isMeat : false}, {isVegan: true}, {isVegetarian: false})
                    }}
            >
              make it vegan!
            </Button>
            <Button title="vegetarian please"
                    style = {styles.vegetarian}
                    onPress = {()=> {
                      this.setState({isMeat : false}, {isVegan: false}, {isVegetarian: true})
                    }}
            >
              vegetarian please
            </Button>
            <Button title="meat me up, Scotty!"
                    style = {styles.meat}
                    onPress = {()=> {
                      this.setState({isMeat : true}, {isVegan: false}, {isVegetarian: false})
                    }}
            >
              meat me up, Scotty!
            </Button>
        </View>
    </View>
    );
  }
}

当我按下其中一个按钮时，收到错误消息：Invariant Violation: Invalid argument passed as callback. Expected a function. Instead received: [object Object]，但我不明白为什么。

Answer 1

好，让我们深入研究一下。其他答案在显示如何修复代码方面是正确的，但没有解释为什么它们正确。您说按下按钮时会发生这种情况，所以它与onPress有关。

onPress = {()=> {
    this.setState({isMeat : false}, {isVegan: true}, {isVegetarian: false})
}}

这就是按钮中的内容，特别是在thunk / arrow函数内部传递的setState（...）。重击/箭头功能很好-它与onPress所要求的类型相匹配，该功能是一种功能，当您按下按钮时将运行setState。到目前为止，一切都很好。

现在，让我们看一下React, specifically what arguments it takes中setState的文档。如果您在下面看，它需要两个参数-一个更新程序（经典的setState对象）和一个回调。

setState(updater[, callback])

好吧，让我们再仔细地看看一下你拥有的东西：

this.setState({isMeat : false}, {isVegan: true}, {isVegetarian: false})

因此，如果我们将您编写的内容与文档中的内容进行比较，则您将{isMeat: false}作为更新程序，将{isVegan: true}作为可选回调，并将{isVegetarian: false}作为第三个，完全未使用的参数。

{isMeat: false}不是一个函数，因此您会收到所看到的消息。这就是为什么您看到不变的违规行为的原因。

Answer 2

也许是因为您要将多个对象传递到setState（）函数中？

尝试将它们切换为单个对象，仅更新要更改的属性。例如：

<Button title="make it vegan!"
  style = {styles.vegan}
  onPress = {()=> {
  this.setState({isVegan: true})
  }}
>

Answer 3

像这样工作：

<Button title="make it vegan!"
                    style = {styles.vegan}
                    onPress = {()=> {
                      this.setState({isMeat : false})
                      this.setState({isVegetarian : false})
                      this.setState({isVegan : true})
                    }}
            >
              make it vegan!
            </Button>

Answer 4

您可以使用setState一次分配多个属性，避免像建议的先前答案那样多次调用，如下所示：

this.setState({
       isMeat: false,
       isVegan: true,
       isVegetarian: false
     })

Answer 5

出现错误是因为我没有将回调传递给 OneSignal.promptForPushNotificationsWithUserResponse

在阅读堆栈跟踪时发现它

反应本机：不变违反：无效的参数作为回调传递。预期的功能。而是收到：[object Object]

5 个答案: