Как перерисовать компонент после setState

Question

Я бы хотел реагировать на компонент перерисовки после каждого редактирования состояния.

Компонент приложения:

  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))
  }

Я использовал Context.Provider для перерисовки, но он не работает.

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

Компонент, который необходимо перерисовать

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>
  )
}

Кнопка с пропеллером props.chooseCur состояние установки в компоненте приложения

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

и я бы хотел " выберите "компонент будет перерисован после setState.

Answer 1

Первый currenciesArr должен быть частью состояния как const [currenciesArr, setCurrenciesArr] = useState([cur1, cur2])

Далее вам необходимо вызвать setCurrenciesArr в ваших chooseCur2 функциях. Я использовал назначение реструктуризации, чтобы получить значение имени внутри функции. Захваты вызываются, когда событие l oop завершено. См. Capbase Medium post для получения дополнительной информации о хуках и событии l oop.

В выборе. js

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

Значение по умолчанию предоставляет значение, если оно отсутствует.

См. Следующие коды и поле для рабочей версии.

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