react 父组件与子组件同时存在异步数据请求数据覆盖问题解决

最新推荐文章于 2022-11-11 23:36:38 发布

rgwu

最新推荐文章于 2022-11-11 23:36:38 发布

阅读量1k

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/m0_37696990/article/details/120214912

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文探讨了在React应用中，父子组件如何正确处理内容更新，特别是涉及到图片上传和编辑器内容变更的情况。通过将图片上传逻辑移至父组件并传递回调函数到子组件，避免了父组件内容覆盖子组件新生成的数据，确保编辑页面内容的正确显示。

摘要由CSDN通过智能技术生成

问题描述

此页面功能为编辑页面
在这里插入图片描述

EditorDemo为了组件
在这里插入图片描述

如图所示上面的标题保存分类为父组件，下面的编辑器为子组件，那么问题来了，如果我在现有内容#11111的基础上复制粘贴上传一个图片，此上传逻辑代码在子组件中,上传成功后我会拿着上传之前的内容#1111与返回的图片链接拼接一块再setValue更新value值，
此为子组件中的数据与SimpleMDE的绑定

 const [value, setValue] = useState('');

  <SimpleMDE
        onPaste={pasteEvent}
        value={props.content}
        onChange={onChange}
        options={userOptions}
      />

由于更新了value值此时会重新渲然子组件，而父组件传给props中的content就会覆盖新生成的value值，造成一打开页面的的内容一直覆盖后面需要生成的数据
此为父组件中引入的子组件代码

  <EditorDemo
              markdownContentRef={markdownContentRef}
              content={content}
            
            />

问题解决

把数据加载代码提到父组件中，并把这个函数引用传子组件，子组件回调父组件中的上传代码
即代码如下：
父组件中

 const imagePast = (evt) =>{上传代逻辑}
 <EditorDemo
              markdownContentRef={markdownContentRef}
              content={content}
               imagePast={imagePast}
            />

子组件中


  const pasteEvent = (evt) => {
    props.imagePast(evt);
  };
  
   <SimpleMDE
        onPaste={pasteEvent}
        value={props.content}
        onChange={onChange}
        options={userOptions}
      />