React Native Picker 移回第一个项目

Posted 2023-02-25

【中文标题】React Native Picker 移回第一个项目

【英文标题】：React Native Picker moves back to first item

【发布时间】：2017-07-13 21:52:16

【问题描述】：

这按预期工作，选择器停留在所选项目上...

<Picker
    selectedValue=this.state.person
    onValueChange=(itemValue) => this.setState(person: itemValue)
    style=styles.picker>
    Object.keys(coWorkers)
        .map((result, index) =>
            <Picker.Item
                label=`$coWorkers[result].name($coWorkers[result].likes)`
                value=coWorkers[result].name
                key=index
            />
        )
    
</Picker>

我想从this.setState 中的coWorkers 对象中获取多个键/值，所以我正在尝试这个...

<Picker
    selectedValue=this.state.person
    onValueChange=(itemValue) => this.setState(person: itemValue.name, likes: itemValue.likes)
    style=styles.picker>
    Object.keys(coWorkers)
        .map((result, index) =>
            <Picker.Item
                label=`$coWorkers[result].name ($coWorkers[result].likes)`
                value=coWorkers[result]
                key=index
            />
        )
    
</Picker>

但是，现在选择器跳回顶部（this.state 正在正确更新）。

【参考方案1】：

Picker 的 prop value 的类型应该是字符串或整数。从网站上的文档中不清楚，但您可以在此处的 Picker 源代码 cmets 中看到它https://github.com/facebook/react-native/blob/master/Libraries/Components/Picker/Picker.js

它对 selectedValue 和 picker items 值进行简单的相等检查，以将其转换为 Pickerios 可以理解的本机。 https://github.com/facebook/react-native/blob/master/Libraries/Components/Picker/PickerIOS.ios.js#L53

虽然内容相同，但对象this.state.selectedValue和匹配的coWorkers[result]是不同的对象

您可以为数组中的每个项目生成一些唯一的 id 并使用它来查找对象。

【讨论】：

您链接的源代码中value 的PropType 是any，而不是字符串/整数

@lfkwtz 你的意思不是这个吗？ github.com/facebook/react-native/blob/master/Libraries/… ?

我的回复已经超过两年了。它显然已经更新，不再相关。

【参考方案2】：

如果其他人遇到此问题并且上述解决方案不起作用，可能是因为您没有将 selectedValue 标志设置为：

// You can replace the null with an actual value in your array(check to see it's exact)
const [toLanguage, setToLanguage] = useState(null); 


selectedValue=toLanguage

【参考方案3】：

您的 itemValue.name 与您的同事不匹配[结果]