如何在 setState 后重新渲染组件

Question

I'd like to react rerender component after every state edit.

App component:

  let [cur1, setCur1] = useState('USD')
  let [cur2, setCur2] = useState('EUR')
  let [result, setResult] = useState(0)
  let currenciesArr = [cur1, cur2]

  async function getRate(e) {
    e.preventDefault()
    setCur1(cur1 = e.target.cur1.value)
    setCur2(cur2 = e.target.cur2.value)
    let amount = e.target.amount.value
    const api_url = await fetch(`https://free.currconv.com/api/v7/convert?q=${cur1}_${cur2}&compact=ultra&apiKey=${API_KEY}`)
    const data = await api_url.json()
    await setResult(convert(amount, data))
  }

I have used Context.Provider for rerender, but it doesn't work.

return (
    <Context.Provider value={{currenciesArr}}>
    <div>
      <Choose getRate={getRate} chooseCur={chooseCur} chooseCur2={chooseCur2}/>
      <ShowRate currencies={currenciesArr} result={result}/>
    </div>
  </Context.Provider>
)

Component that need to rerender

function Choose(props) {
  const cProps = useContext(Context)
  console.log(cProps.currenciesArr);
  return(
    <div>
      <div>
        <button onClick={ props.chooseCur } name='RUB'>RUB</button>
        <button onClick={ props.chooseCur } name='AUD'>AUD</button>
      </div>
      <div>
        <button onClick={ props.chooseCur2 } name='EUR'>EUR</button>
        <button onClick={ props.chooseCur2 } name='GBP'>GBP</button>
      </div>
      <form onSubmit={props.getRate}>
        {cProps.currenciesArr.map((item,i) => {
          return(
            <input type='text' key={i} name={'cur'+(i+1)} defaultValue={item}></input>
          )
        })
        }
        <input type='text' name='amount' defaultValue='1'></input>
        <button onClick={(e)=>{console.log(e.target)}} ></button>
      </form>
    </div>
  )
}

Button with prop props.chooseCur setting state in App component

function chooseCur(e) {
    e.preventDefault()
    setCur1(e.target.name)
  }
  function chooseCur2(e) {
    e.preventDefault()
    setCur2(e.target.name)
  }

and i'd like to "choose" component will rerender after setState.

Answer 1

First currenciesArr should be part of the state as const [currenciesArr, setCurrenciesArr] = useState([cur1, cur2])

Next, you need to call setCurrenciesArr in your chooseCur2 functions. I used a restructuring assignment to get the value of name inside the function. Hooks are called when the event loop is complete. See Capbase Medium post for more information on hooks and the event loop.

In choose.js

You need to use value in your input instead of defaultValue and set it as readonly to prevent receiving a warning about setting the value.

Default value provides the value if none is present.

See the following codesandbox for a working version.

https://codesandbox.io/s/long-rain-8vyuh