如何在setState之后重新发送组件

Question

我想在每次状态编辑后对reender组件做出反应。

应用程序组件：

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])作为状态的一部分

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

在choose.js 中

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

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

有关工作版本，请参阅以下代码沙盒。

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