我正在尝试学习React Js，并且我已经设法在一个让我发疯的问题上卡住了。这个问题很具体，很抱歉我问了这么长时间。我将试着解释它，然后分享代码。
- 我有一个组件，其中包含一个包含员工的表。
- 每一行都有一个编辑按钮它会触发一个只有React引导模态的组件的渲染。
- 我通过props将所有员工的行数据发送给子组件。
- 所有模态字段的默认值都来自于props。
现在，有两种情况:
- 我只得到一行在表中，我将按编辑按钮和所有数据从行加载在模态，甚至图像被设置得很好。当我试图改变图像时，一切都很好，照片立即更新。
- 我得到不止一行在表中，我将按下编辑按钮从任何行，再一次，模态加载良好。出现当我试图改变图像从模态来看…什么也不会发生。有一个非常尴尬的行为，我几乎没有注意到，当我关闭模式，只是一个帧，图像改变。
我真的很难理解为什么表中更多的行会影响Modal中的图像更新吗?或者推迟…
现在，我将尝试分享相关的代码，以及我如何从包含Modal的组件更新图像和其他一些代码。我为接下来的恐怖感到抱歉。
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设置为从表的行发送的photofilename，一切都很好。当选择另一个图像时，我将尝试在图像上强制新的src。同样，当表中只有一行时，它可以完美地工作，但是当有更多行的时候，图像就不会更新。我实在想不出这些事有什么关联。
如果需要，我可以共享github到仓库的链接。
如果有人能指出我愚蠢的错误或有类似的问题，并分享他们的经验，我将非常感激。谢谢，祝你有美好的一天!不幸的是，仅从上面的代码中调试有点困难，但这里有一些建议。您可以尝试将图像源(imagesrc)设置为useState / useEffect的状态，而不是将图像源更改为全局变量。如果是类组件，只需检查:https://reactjs.org/docs/state-and-lifecycle.html
也许还检查你得到的响应的result是什么，如果它确实包含图像url的正确值。我猜你正在做一个返回json对象/值的res.json()。它是正确的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状态时，它也应该直接改变源代码。