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。我使用了一个重组分配来获取函数内部的name值。事件循环完成后，将调用挂钩。有关钩子和事件循环的更多信息，请参见Capbase Medium post。

在choice.js中

您需要在输入中使用value而不是defaultValue并将其设置为只读，以防止收到有关设置该值的警告。

如果没有默认值，则提供默认值。

有关可用的版本，请参见以下codesandbox。

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

setState之后如何重新呈现组件

1 个答案: