reactjs - 当 Prop 数据因 react 钩子(Hook)而改变时，我想重新渲染，但我得到了无限的重新渲染

对不起，我的英语不好.. 但我需要帮助你们!
问题是我想在 EditField 组件中的 Prop 更改时重新渲染。

所以我尝试了两种方法，

首先，我试图使用 useEffect 参数
在 UseEffect Hooks 我试过 useEffect(() => {},[facils]... 像这样
但是当我尝试这种方式时，我得到了无限的重新渲染......

所以我尝试了另一种方法，我将 GetDB 函数传递给 EditField 组件，当我编辑 Prop 数据时，我尝试调用 GetDBfunction。

但它没有按我的预期工作......

你能给我任何建议吗..？

const GetDB = () => {
  const [facils, setFacils] = useState([]);

  useEffect(() => {
    firebase
      .firestore()
      .collection("facils")
      .get()
      .then((snapshot) => {
        const newFacils = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        // prevent firebase quote exceed
        console.log("!!!!FB warniing!!!!");
        setFacils(newFacils);
      });
  }, []);
  return facils;
};

const FacilityLists = () => {
  const facils = GetDB();
  const [id, setId] = useState([]);
  const [name, setName] = useState([]);
  const [showEdit, setShowEdit] = useState(false);

...
...
return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-evenly" }}>
        <div>Id</div>
        <div>시설이름</div>
      </div>
      <div>
        {facils.length > 0 ? (
          facils.map((item) => (
            <ul key={item.id} onClick={() => EditItem(item.id, item.name)}>
              {item.id} - {item.name}
            </ul>
          ))
        ) : (
          <p>there is no data</p>
        )}
      </div>
      <div>
        {showEdit ? (
          <EditField
            id={id}
            name={name}
            showSave={() => setShowEdit(false)}
            handleChange={handleChange}
            refreshData={() => GetDB}
          />
        ) : (
          <CreateField />
        )}
      </div>
    </div>

最佳答案

您不能从处理程序函数调用钩子(Hook)。您可以做的是从 GetDB 钩子(Hook)实现并公开一个提取器并调用它。

还要确保在创建自定义钩子(Hook)时，在其名称前加上 use 前缀，因为它会告诉 react 在其上应用 rules of hooks 并警告您不正确的使用

const useGetDB = () => {
  const [facils, setFacils] = useState([]);
  const fetchData = () => {
      firebase
      .firestore()
      .collection("facils")
      .get()
      .then((snapshot) => {
        const newFacils = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        // prevent firebase quote exceed
        console.log("!!!!FB warniing!!!!");
        setFacils(newFacils);
      });
  }
  useEffect(() => {
    fetchData();
  }, []);
  return { facils, fetchData};
};

发布您可以像下面这样使用它

const FacilityLists = () => {
  const {facils, fetchData} = useGetDB();
  const [id, setId] = useState([]);
  const [name, setName] = useState([]);
  const [showEdit, setShowEdit] = useState(false);

...
...
return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-evenly" }}>
        <div>Id</div>
        <div>시설이름</div>
      </div>
      <div>
        {facils.length > 0 ? (
          facils.map((item) => (
            <ul key={item.id} onClick={() => EditItem(item.id, item.name)}>
              {item.id} - {item.name}
            </ul>
          ))
        ) : (
          <p>there is no data</p>
        )}
      </div>
      <div>
        {showEdit ? (
          <EditField
            id={id}
            name={name}
            showSave={() => setShowEdit(false)}
            handleChange={handleChange}
            refreshData={() => fetchData()}
          />
        ) : (
          <CreateField />
        )}
      </div>
    </div>

关于reactjs - 当 Prop 数据因 react 钩子(Hook)而改变时，我想重新渲染，但我得到了无限的重新渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61955757/