undefined 不是函数（在'...courseGoals.map...'附近）

Question

我不断收到地图功能的错误，而不是它的反应或本机反应！。 我目前正在尝试创建一个反应原生应用程序，为用户创建和保存目标。我正在关注 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

Answer 1

courseGoals 是一个字符串，而不是一个数组。所以它没有可用的map 方法。

在修改前默认为空数组，防止出错。

const [courseGoals, setCourseGoals] = useState([]);

Answer 2

你需要像这样更新你的初始状态 -

const [courseGoals, setCourseGoals] = useState([]);