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

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

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与您的合作伙伴[结果]

不匹配

React Native Picker移回第一项

3 个答案: