React Native Picker触发handleChange is not a function错误如何解决

1. 修复函数名拼写错误 #

你在SetupForm.js中从全局上下文解构函数时写错了函数名：handleChnage → 修正为handleChange，这是触发handleChange is not a function报错的直接原因。

2. 适配React Native Picker的回调逻辑 #

React Native的Picker组件的onValueChange回调不会返回Web端那样的事件对象，它的入参直接是选中项的value值，没有e.target相关属性，因此你原有按Web事件逻辑写的handleChange无法适配RN的Picker组件，需要调整入参和逻辑。

3. 修正name属性绑定位置 #

你将name属性错误绑定在了Picker.Item上，应该绑定在Picker组件本身，或者直接在调用回调时传入字段标识，简化逻辑。

修改后的完整代码 #

SetupForm.js

const SetupForm = () => {
  // 修正拼写错误
  const {quiz, handleChange, handleSubmit, error} = useGlobalContext();
  return (
  <View>
    <View>
      <View>
        <View>
          <Text>HHH</Text>
        </View>

        {/* category */}
        <View>
          <Text>Category</Text>
          <View>
            <Picker
              label="category"
              selectedValue={quiz.category}
              // 直接传递字段名和选中值
              onValueChange={value => handleChange('category', value)}>
              <Picker.Item label="Sports" value="sports" />
              <Picker.Item label="History" value="history" />
              <Picker.Item
                label="Politics"
                value="politics"
              />
            </Picker>
          </View>
        </View>
        <View>{error && <Text>Can not Generate Questions</Text>}</View>
        <Button title="Start" onPress={handleSubmit} />
      </View>
    </View>
  </View>
  );
};

context.js中的handleChange函数

// 调整入参，直接接收字段名和对应值，适配RN组件回调逻辑
const handleChange = (name, value) => {
  console.log(name, value);
  setQuiz({...quiz, [name]: value});
};

内容的提问来源于stack exchange，提问作者mubasshir00