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

Question

我有一个像这样的组件:

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

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

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

我有一个照片更新端点，它可以更新存储在 http://someurl.com/photo/${id}/ 中的照片。

问题是更新后，我访问显示该组件的路线，它仍然显示旧照片。只有刷新页面，照片才会更新。

有没有办法强制重新加载链接内容？或者我是否需要强制重新加载包含该组件的路由？

Answer 1

当状态或 Prop 更新时页面会重新渲染，您可以通过设置状态或 Prop 并更改其值来手动触发重新渲染。

一种情况:

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