配列の引数に変数を使って値を代入

Question

前提・実現したいこと

・配列の引数に変数を使って値を代入したいです。
・最終的には、3x3の9マスのランダムな位置に、ランダムな数字を、1秒間隔で表示させ続けたいです。
・ReactチュートリアルをTypeScriptにしたものを参考にコーディングしています。
https://www.membersedge.co.jp/blog/refactor-react-official-tutorial/

発生している問題・エラーメッセージ

Type '{ count: number; }' cannot be used as an index type.  TS2538

    40 |     const interval = setInterval(() => {
    41 |       setCount(c => c + 1);
  > 42 |       squares[items[{count}].position] = items[{count}].value;
       |                     ^
    43 |     }, 1000);
    44 |     return () => clearInterval(interval);
    45 |   }, []);

該当のソースコード

import React, { useState, useEffect } from 'react';
import './Borad.css';
import Square from './Square';

const Borad: React.FC = () => {
  const [count, setCount] = useState(0);
  
  var squares = [0,0,0,0,0,0,0,0,0];
  
  const items = [
    {position: 0, value: 2},
    {position: 1, value: 2},
    {position: 2, value: 2},
    {position: 3, value: 2},
    {position: 4, value: 2},
    {position: 5, value: 2},
    {position: 6, value: 2},
    {position: 7, value: 2},
    {position: 8, value: 2},
  ]

  squares[items[2].position] = items[2].value;

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(c => c + 1);
      squares[items[{count}].position] = items[{count}].value;
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return(
    <>
      {count}<br/><br/>
      <div>
      {[...Array(3)].map((_, i) => {
        return (
          <div className="board-row" key={i}>
            {[...Array(3)].map((_, j) => {
              const index = 3 * i + j;
              return (
                <Square
                  value={squares[index]}
                  key={j}
                />
              );
            })}
          </div>
        );
      })}
    </div>
  </>
  )
};

export default Borad;

試したこと

・変数ではなく値を直接入れた場合は、問題なく動作します。
・具体的には、22行目の以下の箇所です。
squares[items[2].position] = items[2].value;

補足情報（FW/ツールのバージョンなど）

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.1.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

追記：{count}の括弧{}を外した場合

◆修正後のコード

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(c => c + 1);
      squares[items[count].position] = items[count].value;
    }, 1000);
    return () => clearInterval(interval);
  }, []);

◆エラー内容
・コンソール

Compiled with warnings.

src/components/Borad.tsx
  Line 30:6:  React Hook useEffect has missing dependencies: 'count', 'items', and 'squares'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

・http://localhost:3000の表示

TypeError: Cannot read property 'position' of undefined
(anonymous function)
src/components/Borad.tsx:27
  24 | useEffect(() => {
  25 |   const interval = setInterval(() => {
  26 |     setCount(c => c + 1);
> 27 |     squares[items[count].position] = items[count].value;
     | ^  28 |   }, 1000);
  29 |   return () => clearInterval(interval);
  30 | }, []);

Comments

[papinianus]

count の変数の前後にある波括弧{}を消して実行した結果を共有してくださいますか？

[nagisora]

対応しようとしてくださりありがとうござます。
本文に追記させていただきました。

昔、私はC言語をやっていて、その感覚でreactに望んでいるので、変数と関数コンポーネントが頭の中でこんがらがっています汗

Answer 1

コードを弄りまくっていたら自己解決したので共有させていただきます。
上手く行った理由はわかりませんが、原因を下に列挙します。

皆様色々と考えてくださりありがとうございました。
もしよろしければ、何が悪かったのかを指摘していただけますと嬉しいです。

###原因？
・setStateが良く分からないため、変数でまず試そうとした。
・itemsをuseEffectの外に書いていた。
・useEffectを2個に分けないと駄目だった。

###修正後のコード

import React, { useState, useEffect } from 'react';
import './Borad.css';
import Square from './Square';

const Borad: React.FC = () => {
  
  const [count, setCount] = useState(0);
  const [squares, setSquares] = useState(Array(9).fill(0));

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      const items = [
        {position: 5, value: 3},
        {position: 1, value: 5},
        {position: 0, value: 4},
        {position: 3, value: 8},
        {position: 2, value: 6},
        {position: 4, value: 9},
        {position: 6, value: 2},
        {position: 0, value: 1},
        {position: 8, value: 7},
        {position: 2, value: 3},
        {position: 6, value: 5},
        {position: 8, value: 4},
        {position: 5, value: 8},
        {position: 0, value: 6},
        {position: 2, value: 9},
        {position: 5, value: 2},
        {position: 1, value: 1},
        {position: 7, value: 7},
      ]
      const newSquares = squares.slice()
      newSquares[items[count].position] = items[count].value;
      setSquares(newSquares)
    }, 1000);
    return () => clearInterval(interval);
  }, [squares]);

  return(
    <>
      {count}<br/><br/>
      <div>
      {[...Array(3)].map((_, i) => {
        return (
          <div className="board-row" key={i}>
            {[...Array(3)].map((_, j) => {
              const index = 3 * i + j;
              return (
                <Square
                  value={squares[index]}
                  key={j}
                />
              );
            })}
          </div>
        );
      })}
    </div>
  </>
  )
};

export default Borad;