react-native中Picker的子Item获取value报错失败问题的解决方案

最新推荐文章于 2025-01-03 11:20:45 发布

原创最新推荐文章于 2025-01-03 11:20:45 发布 · 585 阅读

0 ·

CC 4.0 BY-SA版权

React-native 专栏收录该内容

4 篇文章

订阅专栏

在React-Native应用中遇到Picker组件使用时，通过this.props.children获取值报错。问题出在Picker的children并非纯数组，而是特殊的结构。解决方案是将Item用concat连接成纯数组，从而正常获取所需值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Picker时，类似下面的代码：

class Example extends Component {
    render() {
        const values = ['1', '2'];

        return (
            <Picker
                value={this.state.value}
                onValueChange={this.onValueChange.bind(this)}
            >
                <Picker.Item
                    label="n/a"
                    value={null}
                />

                {values.map(value => {
                    return (
                        <Picker.Item
                            label={value}
                            value={value}
                        />
                    );
                })}
            </Picker>
        );
    }
}

点击下拉框中的 1 / 2，便会报错：Cannot read 'props' of undefined 或者Cannot read 'value' of undefined

发现

在测试中发现单独使用数组渲染Picker的子Item时可正常使用，但是添加一个’静态’的Item时，数组渲染的Item就会受到影响，
进一步发现Picker的this.props.children 并不是一个纯数组，而是类似

[
    (child),
    [
        (child),
        (child),
    ],
];

这样的结构，而使用this.props.children[2]去获取也是失败的。

解决方案

可以使用concat去连接Item使Picker的this.props.children变为纯数组：

class Example extends Component {
    render() {
        const values = ['1', '2'];

        return (
            <Picker
                value={this.state.value}
                onValueChange={this.onValueChange.bind(this)}
            >
                {
                    [
                      <Picker.Item label="n/a" />
                    ].concat(values.map(value => {
                        return (
                            <Picker.Item
                                label={value}
                                value={value}
                            />
                        );
                    }))
                }
            </Picker>
        );
    }
}

参考 React-Native 的 pull request