react本机下拉-选择器: TypeError:未定义不是一个对象(计算'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>
        )
    }
}