我一直在为map函数获取错误,而不是它的react或react native!。我目前正在尝试创建一个反应本机应用程序,该应用程序可以为用户创建并保存目标。当我尝试学习本机反应时,我正在关注youtube上的教程。这是代码
import React, {useState} from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
export default function App() {
const [enteredGoal, setEnteredGoal] = useState('');
const [courseGoals, setCourseGoals] = useState('');
const goalinputHandler = (enteredText)=> {
setEnteredGoal(enteredText)
};
const addGoalHandler = ()=>{
setCourseGoals(currentGoals => [...courseGoals, enteredGoal])
};
return (
<View style={styles.screen}>
<View style={styles.inputContainer} >
<TextInput placeholder="Course Goal" style={styles.input}
onChangeText={goalinputHandler}
value={enteredGoal} />
<Button title="ADD" onPress={addGoalHandler} />
</View>
<View>
{courseGoals.map((goal)=> <Text>{goal} </Text> )}
</View>
</View>
);
}
const styles = StyleSheet.create({
screen: {
padding: 50
},
inputContainer: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
input:{ width: 200, borderColor: "black", borderWidth: 1, padding: 10 }
});
这里是错误
undefined is not a function (near '...courseGoals.map...')
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:10696:27 in renderWithHooks
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12842:6 in updateFunctionComponent
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20488:8 in beginWork$$1
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19370:24 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18851:26 in flushSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:6416:14 in flushSync$argument_0
- node_modules\react-refresh\cjs\react-refresh-runtime.development.js:218:32 in mountedRoots.forEach$argument_0
* [native code]:null in forEach
- node_modules\react-refresh\cjs\react-refresh-runtime.development.js:210:25 in mountedRoots.forEach$argument_0
- node_modules\react-native\Libraries\Core\setUpReactRefresh.js:43:6 in Refresh.performReactRefresh
- node_modules\metro\src\lib\polyfills\require.js:609:10 in setTimeout$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:399:17 in callTimers
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue
courseGoals
是字符串。不是数组。因此它没有可用的map
方法。
在将其修改之前,将其默认为空数组,以防止发生错误。
const [courseGoals, setCourseGoals] = useState([]);