Question

一段时间以来，我一直在努力解决这个问题...

我在利用当前状态显示切换按钮时遇到困难，该按钮既可以向本地存储添加项目，也可以从本地存储中删除项目。以下代码可以正确添加和删除，但不能正确呈现。

状态正在镜像存储中的状态，但是（我相信）状态的异步性质允许按钮的呈现仅以一种方式起作用。添加项目时，按钮将从添加（+）更改为删除（x），但不会相反。先前状态使按钮永久显示为十字形。

这是否是对React功能的基本误解-该解决方案是否对其架构不利？或者是否有小小的改动可以实现此功能？

道歉，没有隔离代码的问题区域，但这是一个关键问题-我不知道这是阻碍我努力的原因。

编辑：令人惊讶的是，CodeSandBox示例的功能如我所愿，但是在本地托管，此问题仍然存在。造成这种性能差异的原因是什么？

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

function App() {
  const [data, setData] = useState(null);
  const [input, setInput] = useState("");
  const [item, setItem] = useState("");
  const [favourites, setFavourites] = useState([]);

  const favsLS = localStorage.getItem("drinks");

// Loads localStorage into state
  useEffect(() => {
    if (favsLS && favsLS.length > 15) {
      setFavourites(JSON.parse(localStorage.getItem("drinks")).filter(n => n));
    }
  }, []);

// Adds/Removes item from state
  useEffect(() => {
    if (!JSON.stringify(favourites).includes(item.id)) {
      setFavourites(favourites => [...favourites, item]);
    } else {
      favourites.forEach((drink, index) => {
        let favs = favourites;
        if (item.id === drink.id) {
          favs.splice(index, 1);
          setFavourites(favs);
        }
      });
    }
  }, [item]);

// Commits state to localStorage
  useEffect(() => {
    localStorage.setItem("drinks", JSON.stringify(favourites));
  }, [favourites]);

  const handleChange = e => {
    setInput(e.target.value);
  };

// AJAX call
  const handleSubmit = async e => {
    e.preventDefault();
    let cocktail = input;
    const res = await fetch(
      `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${cocktail}`
    );
    const data = await res.json();
    setData(data.drinks);
    setInput("");
  };

  return (
    <div className='field'>
      <h3>Search</h3>
      <form onSubmit={handleSubmit}>
        <input placeholder={"Enter..."} value={input} onChange={handleChange} />
        <input type='submit' value='Submit' />
      </form>
      <div className='cocktails'>
        {data ? data.map((item, i) => (
              <div key={item.idDrink} className='card'>
                <h3>{item.strDrink}</h3>
                <div>
                  <button
                    className='fav-btn'
                    onClick={() => {
                      setItem({
                        id: item.idDrink,
                        name: item.strDrink,
                        image: item.strDrinkThumb
                      });
                      setFavourites(
                        JSON.parse(localStorage.getItem("drinks")).filter(n => n));
                    }}>
                    {JSON.stringify(favourites).includes(item.idDrink) ? "x" : "+"}
                  </button>
                  <img
                    className='cocktailImg'
                    src={item.strDrinkThumb}
                    alt=''
                  />
                </div>
              </div>
            ))
          : ""}
      </div>
    </div>
  );
}

export default App;

Answer 1

Panther发现了问题-两次调用以更新相同的状态值。通过在渲染中删除对setFavourites的调用，并将滤镜（.filter（n => n））移至其相应的useEffect，可以消除该错误。

React-LocalStorage＆State-按钮切换渲染问题

1 个答案: