React Native 无法识别 useState 钩子

Question

渲染错误：(0,_reactNative.usestate) 不是函数。(在'(0,_reactNative.useState)(''),'(0,_reactNative.useState)'未定义

这是我的代码产生的错误。 所有导入都是最新的。 不知道为什么它不能识别 useState。

import React from 'react';
import { View, StyleSheet,TextInput,useEffect,useState } from 'react-native';
import db from 'D:/App development/PRLog/PrLogBeta/database/firestore'
const EnteryModal = props => {
    const [numReps,setNumReps] = useState('');

    useEffect(() => {
        db.collection('Bench').add({reps:{newNum}})            
      },[]).then(() => {
        console.log('Number Added!');
      });
    return(
        <View style={styles.inputStyle}>
            <form>
                <TextInput
                    style = {styles.inputStyle}
                    keyboardType='number-pad'
                    placeholder={props.RepsOrWeight}
                    placeholderTextColor = 'white'
                    textAlign='center'
                    onChangeText={newNum => setNumReps(newNum)}
                    defaultValue={numReps}
                    onSubmitEditing={useEffect(() => {
                        db.collection('Bench').add({reps:{newNum}})            
                      },[]).then(() => {
                        console.log('Number Added!');
                      })}
>
                </TextInput>
            </form>
            
            
        </View>
    );
};

Answer 1

1. 您需要从 React 导入 useState 和 useEffect，而不是 React Native
2. 您不能在 useEffect 上调用 .then() ，因为它不返回承诺。
3. 您不能将 useEffect 用作​​回调函数。

编辑：代码示例：

根据您问题的片段，您似乎正试图在提交文本输入时触发对数据库的 POST 请求。 这可以在没有 useEffect 的情况下通过简单地将处理程序函数传递给您的文本输入来实现，就像这样。

 import React, { useEffect, useState } from 'react'; import { View, StyleSheet,TextInput } from 'react-native'; import db from 'D:/App development/PRLog/PrLogBeta/database/firestore' const EnteryModal = props => { const [numReps,setNumReps] = useState(''); const handleSubmit = async () => { try { await db.collection('Bench').add({reps:{newNum}}); console.log('Number Added!'); } catch (error) { console.log(error) } } return( <View style={styles.inputStyle}> <form> <TextInput style = {styles.inputStyle} keyboardType='number-pad' placeholder={props.RepsOrWeight} placeholderTextColor = 'white' textAlign='center' onChangeText={newNum => setNumReps(newNum)} defaultValue={numReps} onSubmitEditing={handleSubmit} > </TextInput> </form> </View> ); };

Answer 2

使用 useState 和 useEffect 作为反应组件，而不是作为反应原生组件。

如下例所示。

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, TextInput} from 'react-native';
import db from 'D:/App development/PRLog/PrLogBeta/database/firestore'
const EnteryModal = props => {
const [numReps, setNumReps] = useState('');
  useEffect(() => {
  dataBaseCollection();
  console.log("Number Added!");
 }, []);
 const dataBaseCollection = () => {
 db.collection('Bench').add({ reps: { newNum } });
}
return (
<View style={styles.inputStyle}>
  <form>
    <TextInput
      style={styles.inputStyle}
      keyboardType='number-pad'
      placeholder={props.RepsOrWeight}
      placeholderTextColor='white'
      textAlign='center'
      onChangeText={newNum => setNumReps(newNum)}
      defaultValue={numReps}
      onSubmitEditing={(event) => {
        dataBaseCollection();
      }}
    >
    </TextInput>
  </form>
  </View>
 );
};