Сохраняйте LocalStorage только для одного элемента, используя хук useLocalStorage в React Js - PullRequest
Новая
       15

Сохраняйте LocalStorage только для одного элемента, используя хук useLocalStorage в React Js

0 голосов
/ 12 февраля 2020

Я работаю в следующем сценарии, в котором мой Localstorage содержит одинаковое значение для обоих моих элементов при обновлении. Не уверен, что это проблема с областью видимости того, где я использую свой хук Localstorage.

Codesandbox: https://codesandbox.io/s/stoic-satoshi-owsu9

Js: 

const navLinks = [
  { text: 'Cars' },
  { text: 'Buses' }
];

const Items = ({ text, id, activeTab }) => {
  const [count, setCount] = useLocalStorage("count", 0);

  const plus = () => {
    setCount(count + 1)
  }

  const minus = () => {
    setCount(count - 1)
  }

  return (
    <div
      id={id}
      className={activeTab === id ? "active" : null}
    >
      {text}
      <h2>You clicked {count} times!</h2>
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
};

const Nav = ({ list, activeTab, onClick }) => {
  return list ? (
    list.map((item, index) => (
      <Items
        key={index}
        text={item.text}
        onClick={onClick}
        activeTab={activeTab}
      />
    ))
  ) : (
      <div>No Data</div>
    );
};

function App() {
  const [items, setlist] = useState([]);

  useEffect(() => {
    setlist(navLinks)
  }, []);

  return (
    <Nav list={items} />
  );
}
export default App;
...