React Bootstrap 模式中的图像不更新

Question

我正在尝试学习 React Js，但我遇到了一个让我发疯的问题。很具体，很抱歉问了这么长的问题。我会尝试解释它，然后分享代码。

我有一个包含 table 员工的组件。
在 每一行上都有一个编辑按钮 触发只有 React Bootstrap Modal 的组件的呈现。
我正在通过 props 将所有员工的行数据发送到子组件。
所有modal字段的默认值均来自props

现在有两种情况：

我在 table 中只有一行，我将按下编辑按钮，该行中的所有数据都会加载到模态中，甚至是图像正在设置好。当我尝试更改图像时一切正常，照片立即更新。
我在 table 中得到了多行，我将在任意行中按下编辑按钮，然后再一次，模态加载正常. 问题在我尝试从模态更改 image 时出现...没有任何反应。但是有一个我几乎没有注意到的非常尴尬的行为，当我关闭模式时，仅一帧，图像就会改变。

我真的很难弄清楚为什么 table 中的更多行会影响模式中的图像更新。或者延迟...

现在，我将尝试分享相关的代码位，以及我如何从包含模态框的组件更新图像和一些其他代码。对于接下来的恐怖事件，我深表歉意。

constructor(props){
    super(props);
    this.handleSubmit=this.handleSubmit.bind(this);
    this.handleFileSelected=this.handleFileSelected.bind(this);
}

photofilename = "anonymous.png";

imagesrc = process.env.REACT_APP_PHOTOPATH+this.photofilename;

handleFileSelected(event){
    event.preventDefault();
    this.photofilename=event.target.files[0].name;
    const formData = new FormData();
    formData.append(
        "myFile",
        event.target.files[0],
        event.target.files[0].name
    );

    fetch(process.env.REACT_APP_API+'Employee/SaveFile',{
        method:'POST',
        body:formData
    })
    .then(res=>res.json())
    .then((result)=>{
        this.imagesrc=process.env.REACT_APP_PHOTOPATH+result;
        document.getElementById("img").src = this.imagesrc;
    },
    (error)=>{
        alert('Failed');
    })
}

....
render() {
     return (
          <div className="container"
                 <Modal  
.....
 <Image width="220px" height="220px" 
        src={process.env.REACT_APP_PHOTOPATH+this.props.photofilename} id="img"/>
 <input onChange={this.handleFileSelected} type="File"/>

加载模态时，我首先将图像的 src 设置为从 table 行发送的照片文件名，一切正常。选择另一张图片时，我会尝试在图片上强制使用新的 src。同样，当 table 中只有一行时，它可以完美运行，但是当有更多行时，图像不会更新。我真的无法关联这些东西。

如果需要，我可以将 github link 共享到存储库。

如果有人能指出我的愚蠢错误或有类似的问题并分享他们的经验，我将不胜感激。谢谢，祝你有美好的一天！

Answer 1

不幸的是，仅从上面的代码调试起来有点困难，但这里有一些建议。您能否尝试将图像源 (imagesrc) 设置为具有 useState / useEffect 的状态，而不是仅仅将图像源更改为全局变量。如果是 class 组件，只需检查：https://reactjs.org/docs/state-and-lifecycle.html

也许还可以检查您收到的响应的 result 是什么，以及它是否包含图像 url 的正确值。我猜你正在做一个 res.json() 其中 returns 一个 json object/value。对于您要设置的图像，它是否正确 url（也许应该是 result.url 左右）？请看下面：

this.imagesrc=process.env.REACT_APP_PHOTOPATH+result;

而且我不确定您是否在代码的其他地方使用了这个 imagesrc，或者只是为了更改 document.getElementById("img").src = this.imagesrc;

中的图像源

this.imagesrc = process.env.REACT_APP_PHOTOPATH+result; 
<Image width="220px" height="220px" src={process.env.REACT_APP_PHOTOPATH+this.props.photofilename} id="img"/>

试试直接把上图的src改成imagesrc。因此，当您更新 imagesrc 状态时，它也应该直接更改源。

React Bootstrap 模式中的图像不更新

Image in React Bootstrap Modal does not update

html

javascript

image

react-bootstrap