React Native Picker 移回第一项

Question

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

<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 对象中获取多个 key/values，所以我正在尝试这个...

<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 正在正确更新）。

Answer 1

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

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

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

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

Answer 2

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

Answer 3

如果其他人遇到此问题并且上述解决方案不起作用，可能是因为您没有将 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}

React Native Picker 移回第一项

React Native Picker moves back to first item

javascript

picker

react-native