Javascript 如何将此类代码转换为钩子？-反应的

我试图将这个类React组件转换为React钩子。我已经测试了代码，它可以工作了，但是现在我想用钩子来做，问题是我不完全理解如何做，我试着去做，但根本不起作用，我认为在每个

中，这个.variablename

应该为

setvariablename

更改，但我无法让它工作

我能得到一些帮助吗？谢谢大家

我正在使用这个库反应本机图像裁剪选择器

    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>
  );
};
}

导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文件列表：[]
}
}
onSelectedImage=（图像）=>{
让newDataImg=this.state.fileList；
const source={uri:image.path}；
让项目={
id:Date.now（），
网址：来源：，
内容：image.data
};
newDataImg.push（项目）；
this.setState（{fileList:newDataImg}）
};
从照相机拍摄照片=（）=>{
ImagePicker.openCamera({
宽度：300，
身高：400，
裁剪：没错，
})。然后（图像=>{
此.onSelectedImage（图像）；
console.log（图像）；
});
};
选择RomLibrary=（）=>{
ImagePicker.openPicker({
宽度：300，
身高：400，
裁剪：正确
})。然后（图像=>{
此.onSelectedImage（图像）；
console.log（图像）；
});
};
renderItem=（{item，index}）=>{
返回(
)
};
render（）{
让{fileList}=this.state；
返回(
index.toString（）}
renderItem={this.renderItem}
extraData={this.state}
/>
福托
加莱里亚
);
};
}

导出默认功能应用程序（道具）{
const[fileList，setFileList]=React.useState（[]）；
const onSelectedImage=（图像）=>{
让newDataImg文件列表；
const source={uri:image.path}；
让项目={
id:Date.now（），
网址：来源：，
内容：image.data
};
newDataImg.push（项目）；
setFileList（newDataImg）
};
const takePhotoFromCamera=（）=>{
ImagePicker.openCamera({
宽度：300，
身高：400，
裁剪：没错，
})。然后（图像=>{
onSelectedImage（图像）；
console.log（图像）；
});
};
const choosePhotoFromLibrary=（）=>{
ImagePicker.openPicker({
宽度：300，
身高：400，
裁剪：正确
})。然后（图像=>{
onSelectedImage（图像）；
console.log（图像）；
});
};
常量renderItem=（{item，index}）=>{
返回(
)
};
返回(
index.toString（）}
renderItem={renderItem}
extraData={{fileList}
/>
福托
加莱里亚
);
};

导出默认功能应用程序（道具）{
const[fileList，setFileList]=React.useState（[]）；
const onSelectedImage=（图像）=>{
让newDataImg文件列表；
const source={uri:image.path}；
让项目={
id:Date.now（），
网址：来源：，
内容：image.data
};
newDataImg.push（项目）；
setFileList（newDataImg）
};
const takePhotoFromCamera=（）=>{
ImagePicker.openCamera({
宽度：300，
身高：400，
裁剪：没错，
})。然后（图像=>{
onSelectedImage（图像）；
console.log（图像）；
});
};
const choosePhotoFromLibrary=（）=>{
ImagePicker.openPicker({
宽度：300，
身高：400，
裁剪：正确
})。然后（图像=>{
onSelectedImage（图像）；
console.log（图像）；
});
};
常量renderItem=（{item，index}）=>{
返回(
)
};
返回(
index.toString（）}
renderItem={renderItem}
extraData={{fileList}
/>
福托
加莱里亚
);
};

对devcass答案的改进，使用

useCallback（）

正确地记忆回调，避免将对象文本传递给子组件（例如

extraData={{fileList}}

），并使用回调签名

setState（）

对状态变量进行不可变的更新：

从'react'导入{useState，usemo，useCallback}；
导出默认功能应用程序（道具）{
const[fileList，setFileList]=useState（[]）；
const state=useMemo（（）=>（{fileList}），[fileList]）；
const onSelectedImage=useCallback（（图像）=>{
setFileList（文件列表=>{
const newDataImg=[…文件列表]；
const source={uri:image.path}；
常数项={
id:Date.now（），
网址：来源：，
内容：image.data
};
newDataImg.push（项目）；
返回newDataImg；
});
}，[setFileList]）；
const takePhotoFromCamera=useCallback（（）=>{
ImagePicker.openCamera({
宽度：300，
身高：400，
裁剪：没错，
})。然后（图像=>{
onSelectedImage（图像）；
console.log（图像）；
});
}，[onSelectedImage]）；
const choosePhotoFromLibrary=useCallback（（）=>{
ImagePicker.openPicker({
宽度：300，
身高：400，
裁剪：正确
})。然后（图像=>{
onSelectedImage（图像）；
console.log（图像）；
});
}，[onSelectedImage]）；
const renderItem=useCallback（{item，index}）=>{
返回(
);
}, []);
返回(
index.toString（）}
renderItem={renderItem}
外部数据={state}
/>
福托
加莱里亚
);
}

对devcass答案的改进，使用

useCallback（）

正确地记忆回调，避免将对象文本传递给子组件（例如

extraData={{fileList}}

），并使用回调签名

setState（）

对状态变量进行不可变的更新：

从'react'导入{useState，usemo，useCallback}；
导出默认功能应用程序（道具）{
const[fileList，setFileList]=useState（[]）；
const state=useMemo（（）=>（{fileList}），[fileList]）；
const onSelectedImage=useCallback（（图像）=>{
setFileList（文件列表=>
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>
  );
}