时间戳

首页 > 解决方案 > Onclick按钮，状态不会改变

react-native - Onclick按钮，状态不会改变

问题描述

我在理解代码时遇到了一些麻烦。基本上，如果我这样做：

<Text onPress={() => console.log('123')} >123</Text> ，然后我单击文本，每次单击都会记录 123 次。

但我正在做一个拨号器应用程序。基本上有一个组件 Tile（代表一个数字，也有辅助选项（但稍后会处理））。因此，当我在 App.js 中包含我的（目前只有一个）Tile 时，我希望 onPress 事件调用改变当前拨打号码状态的函数。因此，如果用户在“1”上单击 3 次，我希望最终字符串为 111。问题是，我可以看到该handleNumber()函数在运行代码后被调用一次，并且在单击数字后不再调用，因此永远不会改变状态，不记录任何东西。

App.js Tile 实现：


const [getNumber, setNumber] = useState();

  const handleNumber = (newChar) => {
    console.log(newChar);

    setNumber(newChar);
  }

<Tile onPress={() => handleNumber('1')} style={styles.tile} firstChar={'1'} secondChar={'✉'}/>

瓷砖.js：

const Tile = (props) => {
    return (
        <TouchableOpacity onPress={props.onPress()}> 
            <View>
                <Text style={styles.mainChar}>{props.firstChar}</Text>
                {props.secondChar ? <Text style={styles.secondChar}>{props.secondChar}</Text> : null}
            </View>
        </TouchableOpacity>
    )
}

还有一件事： 正如您在 App.js::handleNumber() 中看到的，当前的实现是错误的，因为最终数字将始终只是新的单个数字，而不是将其附加到字符串的末尾。但是如果我想做 smth like setNumber(getNumber + newChar)，它会给出Maximum update depth exceeded错误。

标签： react-native

解决方案

这里的事情是您将onPress道具传递给TouchableOpacity. 看，你是在调用函数props.onPress而不是仅仅将它传递给组件，这会导致函数在组件渲染（或重新渲染）时执行。

你应该很好，只要使用<TouchableOpacity onPress={props.onPress}>然后setNumber(getNumber + newChar)也会很好。

作为旁注，您可以使用'1'您希望作为初始值 ( const [getNumber, setNumber] = useState('1')) 的字符串初始化 App.js 状态，然后 Tile 组件可以getNumber直接接收。

推荐阅读