Css 如果appendChild和addEventListener正常工作，我需要做什么？

我可以看到这里的问题。按照代码执行的顺序，这些东西将在它仍然存在之前提取，但我根本不知道如何修复它

我想从我的firebase firestore数据库中获取一些信息，并以一种可以很好地显示的方式将其放入dom中

另一件事是，css文件不起作用导致了相同的问题。当我将属性设置为它时，它已经初始化，当然，它根本不会显示（例如：border:50%以进行pic循环）

我想学什么

import React from "react";
import firebase from "./firebase";
import "./artists-styles.css";

const db = firebase.firestore();

const form = document.querySelector("#add-artist-avatar");

function renderArtists(doc) {
      
  const artistsAvatar = document.querySelector(".content");

  let image = document.createElement("img");

  image.setAttribute("src", doc.data().avatar);

  artistsAvatar.appendChild(image);
}

// getting data

db.collection("artists")
  .get()
  .then(snapshot => {
    console.log(snapshot.docs);
    snapshot.docs.forEach(doc => {
      console.log(doc.data());
      renderArtists(doc);
    });
  });

// saving data

form.addEventListener("submit", e => {
  e.preventDefault();
  db.collection("artists").add({
    avatar: form.avatar.value,
  });
  form.name.value = "";
});

const Artists = () => {
  return (
    <div>
      <h1>Cloud Cafe</h1>
      <form id="add-artist-avatar">
        <input type="text" name="avatar" placeholder="Artists Avatar Link" />
        <button>Add Avatar</button>
      </form>
      <div className="content"></div>
    </div>
  );
};

export default Artists;

从“React”导入React；
从“/firebase”导入firebase；
导入“/artists styles.css”；
const db=firebase.firestore（）；
const form=document.querySelector（“添加艺术家头像”）；
函数渲染器（doc）{
const artistsAvatar=document.querySelector（“.content”）；
让image=document.createElement（“img”）；
setAttribute（“src”，doc.data（）.avatar）；
艺术家Savatar.appendChild（图像）；
}
//获取数据
db.收藏（“艺术家”）
.get（）
。然后（快照=>{
console.log（snapshot.docs）；
snapshot.docs.forEach（doc=>{
console.log（doc.data（））；
演奏家；
});
});
//保存数据
表单.addEventListener（“提交”，e=>{
e、 预防默认值（）；
db.收藏（“艺术家”）。添加({
化身：form.avatar.value，
});
form.name.value=“”；
});
康斯特艺术家=（）=>{
返回(
云咖啡馆
添加化身
);
};
导出默认艺术家；

也许你需要这样的东西

import React, { useEffect, useState } from "react";
import firebase from "./firebase";
import "./artists-styles.css";

const db = firebase.firestore();

const Artists = () => {
  const [docs, setDocs] = useState([]);
  const [inputValue, setInputValue] = useState('');
  
  useEffect(() => {
    db.collection("artists")
      .get()
      .then(snapshot => {
        console.log(snapshot.docs);
        setDocs(snapshot.docs);
      });
  }, []);
  
  const handleSubmit = e => {
    e.preventDefault();
    db.collection("artists").add({
      avatar: inputValue
    });
  };
  
  
  return (
    <div>
      <h1>Cloud Cafe</h1>
      <form id="add-artist-avatar" onSubmit={(e) => handleSubmit(e)}>
        <input
            type="text"
            name="avatar"
            placeholder="Artists Avatar Link"
            value={inputValue}
            onChange={e => setInputValue(e.target.value)}
        />
        <button>Add Avatar</button>
      </form>
      <div className="content">
        {docs.map(doc => (
          <img src={doc.data().avatar}/>
        ))}
      </div>
    </div>
  );
};

export default Artists;

import React，{useffect，useState}来自“React”；
从“/firebase”导入firebase；
导入“/artists styles.css”；
const db=firebase.firestore（）；
康斯特艺术家=（）=>{
const[docs，setDocs]=useState（[]）；
常量[inputValue，setInputValue]=useState（“”）；
useffect（（）=>{
db.收藏（“艺术家”）
.get（）
。然后（快照=>{
console.log（snapshot.docs）；
setDocs（snapshot.docs）；
});
}, []);
常量handleSubmit=e=>{
e、 预防默认值（）；
db.收藏（“艺术家”）。添加({
化身：输入值
});
};
返回(
云咖啡馆
handleSubmit（e）}>
setInputValue（e.target.value）}
/>
添加化身
{docs.map（doc=>(
))}
);
};
导出默认艺术家；

使用React时，应避免直接进行DOM操作。我建议在将组件装载到DOM中时检索艺术家（可以通过钩子或使用componentDidMount生命周期方法完成）。还可以查看有关如何在React（）中使用表单的文档。我可以看到这里发生了什么，但它总是说“TypeError:无法读取未定义的属性‘form’。@minternational我已经编辑了我的答案。不过，我还是建议检查一下React表单上的文档。这应该解释很多。