在反应中设置状态数组

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 状态更改时产生运行s 的副作用，并从中更新 localStorage。

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

在反应中设置状态数组

Setting state array in react

arrays

local-storage

reactjs