как увеличить счетчик через функцию

Question

Глупый конечно вопрос но все же...

    let cs = 100;
    // const [count, setCount] = useState(100)
    const [items, setItems] = useState([
         alls('one'),
         alls('then'),
         alls('this'),
    ]);

    function alls(text){
        return {
            text,
            id: cs++,
        }
    }
    const item = () => {
        const newItem = alls('text')
        setItems((items) => [...items, newItem])
    }

функция item запускается по кнопке. Подскажите пожалуйста. как увеличить счётчик что бы id увеличился... заранее спасибо.

Answer 1

Если я вас правильно понял, то вам надо написать так:

const App = () => {
  const [items, setItems] = useState([
    alls('one', 100),
    alls('then', 101),
    alls('this', 102)
  ]);
  const [count, setCount] = useState(103);

  function alls(text: string, id: number) {
    return {
      text,
      id,
    };
  }

  const item = () => {
    setCount(count + 1);

    const newItem = alls('text', count);
    
    setItems((items) => [...items, newItem]);
  };

  console.log(items);

  return (
    <div>
      <p>Start editing to see some magic happen :)</p>
      <p>123</p>
      <button onClick={item}>Click</button>
    </div>
  );
};

Answer 2

Попробуйте поменять код функции alls от @EzioMercer на этот

(если проблема его совета именно в неправильной работе счётчика)

function alls(text){
  let updCount;

  setCount(prev => {
    updCount = prev + 1
    return updCount
  });

  return {
      text,
      id: updCount,
  }
}

Если не поможет, покажите полностью код, вместе с рендером

Answer 3

https://stackblitz.com/edit/react-ts-rku1fj?file=index.tsx

const App = () => {
  const initId = 100;

  const [items, setItems] = useState(createInitialItems());

  const [count, setCount] = useState(initId + items.length + 1);

  function createInitialItems() {
    return [
      createItem('one', initId + 1),
      createItem('then', initId + 2),
      createItem('this', initId + 3),
    ];
  }

  function createItem(text: string, id: number) {
    return {
      text,
      id,
      ret: false,
    };
  }

  function addItem(text: string, count: number) {
    setCount(count + 1);
    const newItem = createItem(text, count);
    setItems((items) => [...items, newItem]);
  };

  function renderItem(item) {
    return <span key={item.id}> {item.id} | </span>;
  }

  console.log(items);

  return (
    <div>
      <p>Start editing to see some magic happen :)</p>
      <p>123</p>
      <button onClick={() => addItem('text', count)}>Click</button>
      <br />
      <br />
      {items.map(renderItem)}
    </div>
  );
};

БЛОГ НА HUSL

как увеличить счетчик через функцию

Ответы (3 шт):