初回のonChangeの際、undifinedになる。その後、二度目の選択すると初回に選択していた値が出力される。[useState]

Question

import React, { useState, useEffect } from 'react'

export const Select = props => {

  const [v, changeValue] = useState()
  const [apiUrl, setApiUrl] = useState()


  const handleChange = e => {
    changeValue(e.target.value)
    console.log(v)
  }

  useEffect(() => {
    fetch('https://url/api/aaa/xxx/bbb/ccc/3'.replace('xxx"', v))
      .then(res => res.json())
      .then(result => {
        setApiUrl(result.message)
      })
  }[v]),

  return (
    <>
      <select onChange={handleChange} value={v}>
        {Object.keys(props.names).map(name => {
          return (
            <option value={name} id={name}>
              {name}
            </option>
          )
        })}
      </select>
    </>
  )
}

Answer 1

stateの更新は非同期で行われますので、changeValueの次の行では、変化したvの値は取れません。

Comments

[Flutter_kun]

ありがとうございます。useEffect内でconsole.logをするといけました！