react-native-dropdown-picker: TypeError: undefined is not an object (evalating 'this.setState')

Question

我目前正在嘗試學習本機反應並想實現一個下拉菜單。

我嘗試通過基於類的示例，但我收到以下錯誤：

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.setState')]
at node_modules\react-native-dropdown-picker\src\components\Picker.js:369:10 in Picker
at node_modules\react-native-dropdown-picker\src\components\Picker.js:636:34 in __onPress
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:66:31 in <anonymous>
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:124:27 in invoke
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:130:16 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248:12 in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:413:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:391:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:133:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:368:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:4 in flushedQueue

這是我的代碼

import React from "react";
import DropDownPicker from 'react-native-dropdown-picker';

export class GroupSelector extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      open : false,
      value : 'One',
      items: [ 'One', 'Two', 'Three']
    };

    this.setValue = this.setValue.bind(this);
  }

  setOpen(isOpen) {
    console.log("Open: " + isOpen);
    this.setState({
      open : isOpen
    });
  }

  setValue(callback) {
    this.setState(state => ({
      value: callback(state.value)
    }));
  }

  setItems(callback) {
    this.setState(state => ({
      items: callback(state.items)
    }));
  }


  render() {
    const { open, value, items } = this.state;

    return (
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={this.setOpen}
        setValue={this.setValue}
        setItems={this.setItems}
      />
    )
  }
};

嘗試打開下拉列表時會引發異常。 登錄setOpen返回Open: true

我來自 C#/C++，我沒有很多使用 javascript 的經驗，所以也許我只是不理解一些概念。

感謝您對此的任何幫助！

Answer 1

文檔中的類組件示例已損壞，但功能組件一似乎工作正常。 無論如何，函數式組件都是首選語法，因此堅持使用它可能是個好主意。

不過，這是一個工作示例：

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            open: false,
            value: null,
            items: [{ label: 'A', value: 'a'}, { label: 'B', value: 'b'}, { label: 'C', value: 'c'}]
        }
    }

    setValue = (callback) => {
        this.setState({ value: callback() })
    }

    setOpen = (open) => this.setState({ open })

    setItems = (items) => this.setState({ items })

    render() {
        const { open, value, items } = this.state
  
        return (
            <View style={{ flex: 1, justifyContent: 'center' }}>
                <DropDownPicker
                    open={open}
                    value={value}
                    items={items}
                    setOpen={this.setOpen}
                    setValue={this.setValue}
                    setItems={this.setItems}
                />
            </View>
        )
    }
}