Question

我一直在尝试将一个对象推送到一个状态数组，然后推送到本地存储，这样即使在刷新后它也可以保持可见，除了最终推送没有发生外，一切正常。为了使对象保持在本地保存，我必须添加它，然后添加一个，然后不保存。非常感谢任何帮助

function App() {
  const [data, setData] = useState([{ name: "", thumbnail: { path: "" } }]);
  const [team, setTeam] = useState(JSON.parse(localStorage.getItem("team")));
  console.log(team);
  useEffect(() => {
    fetch(
      "http://gateway.marvel.com/v1/public/characters?apikey="
    )
      .then((data) => data.json())
      .then((data) => setData(data.data.results));
  }, []);

  const addToTeam = (hero) => {
    !team ? setTeam([hero]) : setTeam([...team, hero]);
    localStorage.setItem("team", JSON.stringify(team));
  };

Answer 1

React 状态更新不是同步的。所以当你运行这段代码时：

  const addToTeam = (hero) => {
    !team ? setTeam([hero]) : setTeam([...team, hero]);
    localStorage.setItem("team", JSON.stringify(team));
  };

您可以设置先前的 team 值而不是您刚刚设置的值。

要解决此问题，您可以创建在 team 状态更改时运行的副作用并从中更新 localStorage。

useEffect(() => {
  localStorage.setItem("team", JSON.stringify(team));
}, [team]);

在反应中设置状态数组

1 个答案: