Question

我不断地因map函数而报错，而不是它的反应还是本机反应！我目前正在尝试创建一个反应本机应用程序，该应用程序可以为用户创建并保存目标。当我尝试学习本机反应时，我正在关注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([]);

未定义不是函数（在'... courseGoals.map ...'附近）

2 个答案: