Как передать правильное значение счетчика HTML-элементу в React с помощью цикла?

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие хуки

Вопрос:

Я создаю таблицу 3 x 3 с помощью простого цикла следующим образом:

   React.useEffect(() => {
    const _array = [];
    let i = -1;
    for (let c = 1; c < 4; c  ) {
      for (let r = 1; r < 4; r  ) {
        i  ;
        _array.push(
          <div
            key={`x${c}x${r}`}
            className={`x${c}x${r}`}
            onClick={() => console.log(i)}
          >
            {i}
          </div>
        );
      }
    }
    setArray(_array);
  }, []);

console.log(i) In each <div> возвращает 8, хотя {i} каждый раз выводит правильное число.

Как я могу правильно закодировать i внутри каждого div, используя этот цикл?

Для воспроизведения вы можете увидеть полный код в CodeSandbox.

1. Почему вы хотите сохранить компоненты React в состоянии?

2. @ZsoltMeszaros Я создаю таблицу размером 3×3. Есть ли другой способ, которым я могу это сделать? Очевидно, я не хочу жестко указывать числа.

3. Только что добавил ответ, надеюсь, это поможет.

Ответ №1:

Вы не должны хранить элементы React в состоянии, только данные, которые могут быть отображены позже.

Согласно старым документам React, state он должен содержать только минимальное количество данных, необходимых для представления состояния вашего пользовательского интерфейса. Как таковой, он не должен содержать компонентов React. Создайте их на render() основе базового props и state .

 function App() {
  const [array, setArray] = React.useState([]);

  React.useEffect(() => {
    const _array = [];
    let i = -1;
    for (let c = 1; c < 4; c  ) {
      for (let r = 1; r < 4; r  ) {
        i  ;
        _array.push({ id: `x${c}x${r}`, content: i });
      }
    }
    setArray(_array);
  }, []);

  return (
    <div className="containter">
      <div className="game">
        {array.map((item) => (
          <button
            key={item.id}
            className={item.id}
            onClick={() => console.log(item.content)}
          >
            {item.content}
          </button>
        ))}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Развернуть фрагмент