在react native中未定义的值

Question

我使用react native实现扫描仪应用程序，但当我希望实现应用程序与api POST数据到mysql服务器时，它显示了一个错误undefined不是一个对象(评估'_this.state.userid')我是新的反应原生和可能做了一些简单的错误或错误，请帮助我指出

下面是我的代码

export default function Scanner () {

const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(true);
const [userid, setText] = useState('Not yet scanned')
const [currentDate, setCurrentDate] = useState('');
const navigation = useNavigation();

const askForCameraPermission = () => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})()
}
// Request Camera Permission
useEffect(() => {
askForCameraPermission();
}, []);
useEffect(() => {
var date = new Date().getDate(); //Current Date
var month = new Date().getMonth() + 1; //Current Month
var year = new Date().getFullYear(); //Current Year
var hours = new Date().getHours(); //Current Hours
var min = new Date().getMinutes(); //Current Minutes
var sec = new Date().getSeconds(); //Current Seconds
setCurrentDate(
date + '/' + month + '/' + year 
+ ' ' + hours + ':' + min + ':' + sec
);
}, []);
// What happens when we scan the bar code
const handleBarCodeScanned = ({ type, data }) => {

setScanned(true);


setText(data )


};

// Check permissions and return the screens
if (hasPermission === null) {
return (
<View style={styles.container}>
<Text>Requesting for camera permission</Text>
</View>)
}
if (hasPermission === false) {
return (
<View style={styles.container}>
<Text style={{ margin: 10 }}>No access to camera</Text>
<Button title={'Allow Camera'} onPress={() => askForCameraPermission()} />
</View>)
}

const Register = () => {
let userid = this.state.userid;

let InsertAPIURL = "https://localhost/api/insert.php";
let headers = {

'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Methods': 'POST, PUT, PATCH, GET, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, X-Api-Key, X-Requested-With, Content-Type, Accept, Authorization',
}
let Data = {
userid: userid,

};
fetch(InsertAPIURL, {
mode:'no-cors',
method: 'POST',
headers: headers,
body: JSON.stringify(Data)
})
try{
((response) =>response.json()),
((response)=>{
alert(response[0].Message);
})
}

catch{
((error) => {
alert("Error"+error);
})
}
}
// Return the View
return (

<View style={styles.container}>
<View style={styles.barcodebox}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={{ height: 400, width: 400 }} />
</View>

<Text style={styles.maintext}>{userid + 'n'+currentDate}

</Text>

{
scanned && <Button title={'Scan again?'} onPress={() => setScanned(false)} color='tomato' />

}

{
scanned && <Button title={'OK'} onPress={()=>{navigation.navigate('Home,{userid}')},Register()} /> 

}
</View>
);
}

Answer 1

您在此语句中混合了类组件方法和功能组件方法:

let userid = this.state.userid;

您已经在useState中定义了userid，并且它可用于嵌套函数。

BTW: React编码惯例是使用"set"命名setter函数。+状态变量，所以应该有

const [userid, setUserid] = useState('Not yet scanned')