如何在 setState 之后重新渲染组件答案

【问题标题】：How to rerender component after setState如何在 setState 之后重新渲染组件
【发布时间】：2020-08-08 14:44:56
【问题描述】：

我想在每次状态编辑后对重新渲染组件做出反应。

应用组件：

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

App 组件中带有 props.chooseCur 属性的按钮设置状态

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

我想“选择”组件将在 setState 之后重新呈现。

【问题讨论】：

这里不需要上下文。上下文用于在许多断开连接的组件之间共享状态。您的状态存储在 App 中，并且您要使用该状态的组件是 App 的子组件。
在创建状态值时应该使用const 而不是let。如果Choose 组件需要使用currenciesArr，则应将其作为prop 传递。
我将它作为道具传递，但它不起作用。所以，我在 React 文档中读到：“每个 Context 对象都带有一个 Provider React 组件，它允许消费组件订阅上下文更改。”我认为它可以解决问题。
你能在 CodeSandbox 上发布一个工作示例，我会看看吗？
codesandbox.io/s/sparkling-star-sdotu?file=/src/index.js

标签： reactjs react-hooks

【解决方案1】：

第一个currenciesArr 应该是const [currenciesArr, setCurrenciesArr] = useState([cur1, cur2]) 状态的一部分

接下来，您需要在 chooseCur2 函数中调用 setCurrenciesArr。我使用重组赋值来获取函数内部的 name 值。事件循环完成时调用钩子。有关钩子和事件循环的更多信息，请参阅Capbase Medium post。

在choose.js中

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

如果不存在，则默认值提供值。

请参阅以下codesandbox 以获取工作版本。

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

【讨论】：

知道了！谢谢！