react-native - 输入内容会导致模态自动重新加载

Question

在我的 React Native 0.62.3 应用程序中，使用 modal 来收集用户输入。下面是查看代码:

import { Modal, View, TextInput, Button } from 'react-native';
const [price, setPrice] = useState(0);
const [shippingCost, setShippingCost] = useState(0);
const ReturnModal = () => {
        if (isModalVisible) {
            return (
                <View style={styles.modalContainer}>
                <Modal visible={isModalVisible} 
                            animationType = {"slide"}
                            transparent={false} 
                            onBackdropPress={() => setModalVisible(false)}>
                        <View style={styles.modal}>
                            <Text>Enter Price</Text>
                            <TextInput keyboardType={'number-pad'} onChange={priceChange} value={price} autoFocus={true} placeholder={'Price'} />
                            <TextInput keyboardType={'number-pad'} onChange={shChange} value={shippingCost}  placeholder={'SnH'} />
                            <View style={{flexDirection:"row"}}>
                            <Button title="Cancel" style={{bordered:true, backgroundColor:'red'}} onPress={modalCancel} />
                            
                            <Button title="OK" style={{bordered:true, backgroundColor:'white'}} onPress={modalOk} />
                            </View>
                        </View>
                    </Modal>
                </View>
            )    
        } else {
            return (null);
        }
    }

    return (
            <Container style={styles.container}>
               //.....view code

              <ReturnModal />
      
          </Container>
    )

这里有 2 个函数用于重置 price 和 shippingCost 的状态:

  const priceChange = (value) => {
    if (parseFloat(value)>0) {
        setPrice(Math.ceil(parseFloat(value)));
    }
};

const shChange = (value) => {
    if (parseFloat(value)>=0) {
        setShippingCost(Math.ceil(parseFloat(value)));
    }
};

问题是，每当通过按键进入价格字段时，模式都会自动重新加载/重置。在TextInput中尝试了onChangeText，它也有同样的问题。

Answer 1

看起来您是在组件之外声明您的 Hook 。尝试将它们放入 ReturnModal 函数中，如下所示:

const ReturnModal = () => {
  const [price, setPrice] = useState(0);
  const [shippingCost, setShippingCost] = useState(0);
  ...

文档引用:Using the State Hook .

此外，我强烈建议使用 React Hooks ESLint Plugin (除其他外)检测您的钩子(Hook)问题。以下是有关如何将其添加到 React Native 项目的指南:Add Eslint Support to your React Native Project + React Hooks Rules .