Мне нужно чтобы выбранный вариант select сохранялся в localstorage и после перезагрузки значение было таким же. Я уже отслеживаю значение выбранного значения и сохраняю в localstorage и на основе этого значения выполняю нужные мне действия, но значения select после перезагрузки страницы становятся по умолчанию.
Я получаю данные из GraphQl, поэтому предположим, что опция содержит значения «один», «два», «три». Спасибо.
const Currency_Query = gql`
{
currencies{
label
symbol
}
}
`
;
class Currency extends Component {
constructor(props){
super(props);
this.state = {
currencies: [],
}
}
componentDidMount = async () =>{
const response = await client.query({
query: Currency_Query
})
this.setState({
currencies:response.data.currencies
})
}
render() {
return(
<div className={s.select}>
<select>
{this.state.currencies.map((currencies) =>(
<option>
<div className={s.option} >{currencies.symbol} {currencies.label}
</div>
</option>
)
)
}
</select>
</div>
);
}
}
export default Currency;
Пример как я храню данные в localstorage
componentDidMount(){
this.Data = JSON.parse(localStorage.getItem('data'));
if(localStorage.getItem('data')){
this.setState({
selectValue: this.Data.selectValue,
countId: this.Data.countId,
})
} else {
this.setState({
selectValue: "$ USD",
countId: {quantityId:[]}
})
}
}
componentWillUpdate(nextProps, nextState){
localStorage.setItem('data', JSON.stringify(nextState))
}
