最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React Native Picker moves back to first item - Stack Overflow

programmeradmin1浏览0评论

This works as expected, where the picker stays on the selected item...

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

I want to get multiple key/values from the coWorkers object in this.setState, so I am trying this...

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

However, now the picker jumps back to the top (this.state is being correctly updated though).

This works as expected, where the picker stays on the selected item...

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

I want to get multiple key/values from the coWorkers object in this.setState, so I am trying this...

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

However, now the picker jumps back to the top (this.state is being correctly updated though).

Share Improve this question asked Jul 13, 2017 at 21:52 mikeriley131mikeriley131 3937 silver badges16 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

The type of the prop value for the Picker should be either string or integer. It is not clear from the docs on the website but you can see it in the Picker source code ments here https://github./facebook/react-native/blob/master/Libraries/Components/Picker/Picker.js

It does a simple equal check of selectedValue and picker items value to translate it to the native PickerIOS understands. https://github./facebook/react-native/blob/master/Libraries/Components/Picker/PickerIOS.ios.js#L53

Although the contents are same the object this.state.selectedValue and matching coWorkers[result] are different objects

You can generate some unique ids for each item in the array and use that to lookup the object.

If someone else has this problem and the solutions above are not working, it might be because you don't have the selectedValue flag set to something:

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

Your itemValue.name is not matching your coWorkers[result]

发布评论

评论列表(0)

  1. 暂无评论