在 React 中安装组件时如何刷新照片链接引用？

Question

I have a component like so:

export function SomeComponent(props) {
  const { id } = props;

  const photo = `http://someurl.com/photo/${id}/`;

  return (
    <View>
      <Avatar
        rounded
        source={photo}
      />
    </View>
  );
}

I have a photo update endpoint which updates the photo that is stored in http://someurl.com/photo/${id}/ .

The issue is after the update and I visit the route where this component is shown, it's still showing the old photo. Only if I refresh the page, will the photo get updated.

Is there a way to force reload the content of the link? Or do I need to force reload the route that contains the component?

Answer 1

the page re-renders when the states or props are updated, you can manually trigger re-render by setting up a state or prop and changing its value.

one scenario:

ParentComponent() {
  const [trigger, setTrigger] = useState(false);

  const onUpdate = () => {
   setTrigger(false);  
 }
return (
 ..... your code 
 <SomeComponent trigger={trigger} />  // trigger is passed as prop so as its value changes component re-renders
  ) 
}