ReactJS：将对象传递给获取承诺答案

【问题标题】：ReactJS: Pass object into fetch promiseReactJS：将对象传递给获取承诺
【发布时间】：2021-04-06 13:53:38
【问题描述】：

我有点新反应，这个羽毛笔插件真的让我很困惑。我正在使用react-quilljs 来显示一个可编辑的富文本字段，该字段应该预先填充一个使用从我的API 中获取的值。看起来很简单，对吧？但我在 fetch 回调中收到错误“quill is undefined”。

import React, { useState, useEffect } from "react";

import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// see https://www.npmjs.com/package/react-quilljs

export default function View(props) {
  
  const [group, setGroup] = useState([]);
  const { quill, quillRef } = useQuill({});

  useEffect(() => {

      fetch('/api/groups/' + props.id , {
                method: 'GET'
            })
            .then(res => res.json())
            .then((data) => {
                
                setGroup(data);

                quill.setContents(JSON.parse(data));                
            })
            .catch(console.log);

    }, [quill]);

    return(
        
        <div >
            <div id="descriptionInput" ref={quillRef} />
        </div>
    );
}

当然我省略了很多代码，但我认为应该足以说明问题。我认为，基本上问题是，我如何将 quill 对象传递给 fetch 承诺？

我已经搜索了答案，但由于某种原因找不到任何关于此的内容。

【问题讨论】：

您是否考虑过改用github.com/zenoamaro/react-quill？它更加强大和流行。
@buzatto 是的，我最初是从 react-quill 开始的，但后来切换到 react-quilljs，因为我也遇到了问题:(
我不熟悉 quill 库，但来自文档和示例 code sandbox、console.log(quill); // undefined > Quill Object。我猜你会得到错误，因为在前几个渲染中 quill 是未定义的。您是否尝试过仅在定义了quill 时才运行fetch？如果这可行，您可以对其进行一些优化以确保立即进行提取，然后仅在定义时运行quill.setContents。
@AsherLim 这似乎有道理，但钩子只被调用一次。当我添加条件if (quill) 时，它永远不会达到..

标签： reactjs fetch quill

【解决方案1】：

经过更多检查后，发现useEffect 被多次调用，并且 quill 无法立即使用（如 Asher Lim 所述）。因此，在 fetch 承诺中添加检查 if (quill) 即可解决问题。

当然，这意味着获取的次数超出了必要的次数，这可以通过更多重构来解决。

【讨论】：

【解决方案2】：

我翻阅了文件，发现了这个：

quill.clipboard.dangerouslyPasteHTML();

我为您制作了一个工作示例： https://codesandbox.io/s/epic-stonebraker-itt06?file=/src/App.js:401-469

【讨论】：