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

<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 源代码 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 并使用它来查找对象。

Answer 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}

Answer 3

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