我需要做什么才能使 appendChild 和 addEventListener 起作用？

问题描述

我可以在这里看到问题。按照代码执行的顺序，东西会在它仍然存在之前获取，但我根本不知道如何解决这个问题。

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

另一件事是，由于同样的问题，css 文件不起作用。当我将它设置为 setAttribute 时，它​​已经初始化，当然，它根本不会显示（例如：border: 50% 使图片变圆）。

我想学什么？

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;

解决方法

也许你需要这样的东西

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;