React Native 选择器移回第一项

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>

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

<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

valuePicker 的prop 类型应该是字符串或整数。从网站上的文档中尚不清楚，但您可以在此处的 Picker 源代码注释中看到它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，并使用它来查找对象。