React Native将类转换为函数

Question

我有一个难以置信的困难的时间从一个类到一个函数，我现在非常难办。如果我能得到帮助，我会非常感激。我删除了渲染，但我对如何改变状态感到困惑。

代码(当前为类):

import React, { Component } from 'react'
import { View } from 'react-native'
import SelectMultiple from 'react-native-select-multiple'
const fruits = ['Apples', 'Oranges', 'Pears']
// --- OR ---
// const fruits = [
//   { label: 'Apples', value: 'appls' },
//   { label: 'Oranges', value: 'orngs' },
//   { label: 'Pears', value: 'pears' }
// ]
class App extends Component {
state = { selectedFruits: [] }
onSelectionsChange = (selectedFruits) => {
// selectedFruits is array of { label, value }
this.setState({ selectedFruits })
}
render () {
return (
<View>
<SelectMultiple
items={fruits}
selectedItems={this.state.selectedFruits}
onSelectionsChange={this.onSelectionsChange} />
</View>
)
}
}
export default App

理想目标(函数):

function Fruits ({navigation}) {
// implementation
}

Answer 1

下面似乎可以工作(https://snack.expo.io/MBUMn_I8q):

const fruits = [
{ label: 'Apples', value: 'appls' },
{ label: 'Oranges', value: 'orngs' },
{ label: 'Pears', value: 'pears' }
]
function Fruits ({navigation}) {
const [selectedFruits, setSelectedFruits] = React.useState([]);
const onSelectionsChange = newSelections => {
setSelectedFruits(newSelections);
}
return (
<View>
<SelectMultiple
items={fruits}
selectedItems={selectedFruits}
onSelectionsChange={onSelectionsChange} />
</View>
)
}

您将使用useState而不是this.setState来保存状态。并且，在函数组件的末尾，您只需返回视图层次结构。