使用状态更新组件的问题

Question

https://streamable.com/c1ygkw

我遇到了一个问题他们从更改中收到信息的项目中。

它从我的计算机中选择图像并保存

const savePictureChange = () => {
    // upload Image to Firestore
    uploadImage(user, type, imageFile, onImageUploaded);
    let fileGetter = document.getElementById("file");
    showImageWithFileReader(fileGetter, detailedImage);
    // close Modal
    setModalOpen(false);
  };

在Firestorage中后的保存之后

const onImageUploaded = (snapshot) => {
    // set storageUrl of Item
    const storageUrl = snapshot.metadata.fullPath;
    item.storageUrl = storageUrl;
    // store storageURL in fireStore and storage
    updateSnippetPartInFireStore(user.uid, item, "storageUrl", storageUrl);
    typeSetListFunction(item.type, updateSnippetPartInStorage(item));
  };

function updateSnippetPartInStorage(snippetPart) {
  const type = snippetPart.type.toLowerCase();
  const list = [...JSON.parse(localStorage.getItem(type))];
  const filteredList = list.filter((i) => i.id != snippetPart.id);
  filteredList.push(snippetPart);
  localStorage.setItem(
    snippetPart.type.toLowerCase(),
    JSON.stringify(filteredList)
  );
  return list;
}

开始在这里开始，我更新了我的Easy-Peasy Store的相应storestates（Easy-Peasy是基于Redux）

// set Store lists by snippetPart type
  const typeSetListFunction = (type, list) => {
    console.log("type is ", type);
    switch (type) {
      case "Characters":
        console.log("setCharacters list is", list);
        setCharacters(list);
        break;
      case "Events":
        setEvents(list);
        break;
      case "Locations":
        setLocations(list);
        break;
      case "Items":
        setItems(list);
        break;
    }
  };

，这是商店状态如何通过节点遍历的方式。 NavigationBar：

const NavigationBar = () => {
  const { characters, locations, items, events, storylines, snippets, words } =
    useStoreState((store) => store);

  useEffect(() => {
    console.log("characters from useStoreState are ", characters);
  }, [characters]);

  return (
    <div>
      <WriteItem imgSrc="icon_empty_space.png" />
      <NavigatorItem
        imgSrc="icon_character.png"
        name="Characters"
        link="characters"
        list={characters}
      />

{expanded && <SubItemBar list={props.list} specific={props.name} />}

subitembar：

const SubItemBar = ({ list, specific }) => {
  const nullCheckList = list ?? [];
  const notAnyList = nullCheckList.filter((i) => i.id != 0);
  const [importance, setImportance] = useState("Main");
  const [itemList, setItemList] = useState(notAnyList);

  const mainList = notAnyList.filter((i) => i.importance == "Main");
  const mentionedList = notAnyList.filter((i) => i.importance == "Mentioned");
  const sideList = notAnyList.filter((i) => i.importance == "Side");


<div className="subItemBar">
        {itemList.map((i) => (
          <NavigatorSubItem key={i.name} item={i} specific={specific} />
        ))}
      </div>

    const NavigatorSubItem = ({ item, specific }) => {
      const setDragCursor = useStoreActions((store) => store.setDragCursor);
      const { user } = useStoreState((store) => store);
      const { name, storageUrl } = item;
      const navigate = useNavigate();
      const image = useRef(null);
    
      useEffect(() => {
        if (storageUrl != "" && storageUrl != null) {
          console.log("getting image from FireStorage");
          getDownloadURL(ref(storage, storageUrl)).then((url) => {
            image.current.setAttribute("src", url);
          });
        }
      }, [image]);

但是如您在视频中所见。 “ navigatorsubitem”的图像不会刷新直到我重新加载，甚至更奇怪的是，中间的组件图像（）将更新...但仅在第二次尝试中。

我只是无法完美地使它起作用。

附带问题： 这样设置，我每次点击“主”侧“提到”时，我会重新从火灾中检索图像。我尝试将图像保存在LocalStorage中，但也无法做到这一点，所以我放弃了认为这可能没事的。这将是一个问题，即待存储付款的明智还是可以的？如果是这样，我可以使用localstorage来缓存这些图像，在哪里可以阅读？