我正在尝试将此类 React Component 转换为 React Hooks。我已经测试了代码并且它有效,但现在我想使用钩子(Hook)来做到这一点,问题是我不完全理解如何做到这一点,我尝试这样做,但它根本不起作用,我认为在每个 this.variablename
都应该更改为 setvariablename
但我无法使其工作。
我可以帮忙吗?非常感谢大家。
我正在使用这个库react-native-image-crop-picker
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
fileList:[]
}
}
onSelectedImage = (image) => {
let newDataImg = this.state.fileList;
const source = {uri: image.path};
let item = {
id: Date.now(),
url: source,
content: image.data
};
newDataImg.push(item);
this.setState({fileList: newDataImg})
};
takePhotoFromCamera = () => {
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true,
}).then(image => {
this.onSelectedImage(image);
console.log(image);
});
};
choosePhotoFromLibrary = () => {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
this.onSelectedImage(image);
console.log(image);
});
};
renderItem = ({item, index}) =>{
return(
<View>
<Image source={item.url} style={styles.itemImage} />
</View>
)
};
render() {
let {fileList}= this.state;
return (
<View style={styles.container}>
<FlatList
data={fileList}
keyExtractor = {(item, index) => index.toString() }
renderItem={this.renderItem}
extraData={this.state}
/>
<TouchableOpacity style={styles.viewData} onPress={this.takePhotoFromCamera}>
<text>Foto</text>
</TouchableOpacity>
<TouchableOpacity style={styles.viewData} onPress={this.choosePhotoFromLibrary}>
<text>galeria</text>
</TouchableOpacity>
</View>
);
};
}
最佳答案
对 devcass 答案的改进,使用 useCallback()
正确内存回调,并避免将对象文字传递给子组件(例如 extraData={{ fileList }}
),并使用 setState()
的回调签名对状态变量进行不可变更新:
import { useState, useMemo, useCallback } from 'react';
export default function App(props) {
const [fileList, setFileList] = useState([]);
const state = useMemo(() => ({ fileList }), [fileList]);
const onSelectedImage = useCallback((image) => {
setFileList(fileList => {
const newDataImg = [...fileList];
const source = { uri: image.path };
const item = {
id: Date.now(),
url: source,
content: image.data
};
newDataImg.push(item);
return newDataImg;
});
}, [setFileList]);
const takePhotoFromCamera = useCallback(() => {
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true,
}).then(image => {
onSelectedImage(image);
console.log(image);
});
}, [onSelectedImage]);
const choosePhotoFromLibrary = useCallback(() => {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
onSelectedImage(image);
console.log(image);
});
}, [onSelectedImage]);
const renderItem = useCallback(({ item, index }) => {
return (
<View>
<Image source={item.url} style={styles.itemImage} />
</View>
);
}, []);
return (
<View style={styles.container}>
<FlatList
data={fileList}
keyExtractor={(item, index) => index.toString()}
renderItem={renderItem}
extraData={state}
/>
<TouchableOpacity style={styles.viewData} onPress={takePhotoFromCamera}>
<text>Foto</text>
</TouchableOpacity>
<TouchableOpacity style={styles.viewData} onPress={choosePhotoFromLibrary}>
<text>galeria</text>
</TouchableOpacity>
</View>
);
}
关于javascript - 如何将此类代码转换为钩子(Hook)? - 原生 react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61051116/