web-dev-qa-db-ja.com

React useStateはここでデフォルト値を受け入れないようですか？

特定の線を表示/非表示にすることができるグラフコンポーネントがあります。どの行がアクティブであるかを追跡するために、activeKeys配列を状態に保持します。最初に、データの配列を取る関数getKeysからキー名を取得します。

私がこれをするとき：

    const defaultValue = getKeys(data)
    console.log('defaultValue from keys', defaultValue)
    const [activeKeys, setActiveKeys] = useState(defaultValue)
    console.log('activeKeys', activeKeys)

最初のコンソールログに正しいキーが表示されます。

["createdCount", "confirmedCount", "hasFeedbackCount"]

2番目のコンソールログに[]と表示されます

しかし私がする場合：

const defaultValue = ["createdCount", "confirmedCount","hasFeedbackCount"]
console.log('defaultValue', defaultValue)
const [activeKeys, setActiveKeys] = useState(defaultValue)
console.log('activeKeys', activeKeys)

最初のコンソールログは同じ配列を示しています：

["createdCount", "confirmedCount", "hasFeedbackCount"]

AndactiveKeysは正しい配列を示します。

["createdCount", "confirmedCount", "hasFeedbackCount"]

useStateは壊れているのでしょうか。 getKeysは単純な関数であり、約束などはありません。次のようになります。

const getKeys = (data: Props['data']): string[] => {
  const reduced = data.reduce((acc, datum) => [...acc, ...Object.keys(datum.lines)] as any, [])
  const setted = new Set(reduced)
  const arrayed = Array.from(setted)
  return arrayed
}

Props['data']の形状は次のとおりです。

  data: {
    date: string
    lines: Partial<Record<string, number>>
  }[]
arraysreactjstypescriptreact-hooks
3
Mehdi Saffar

DefaultValueの代わりにdefをuseState（）に渡しています。

const defaultValue = getKeys(data)
console.log('defaultValue from keys', defaultValue)
const [activeKeys, setActiveKeys] = useState(defaultValue)
console.log('activeKeys', activeKeys)
0
Parham Hausler