Я пытаюсь использовать redux
Это упрощенный пример:
каждый раз, когда у меня возникает проблема с зачисткой дисплея
У меня есть функция updatePrice (), которая отображает создаем массив с элементами с ценами
, например, чтобы упростить задачу: у меня есть div и 3 кнопки, каждая кнопка меняет значение призов 15, 20, 40,
в моем редукторе
У меня есть initState: {
цена: 5
, когда я создаю функцию choosePrice (e), которая получает значение кнопки (например, 15), и я вызывать сразу после функции updatePr ie () сразу после воссоздания массива с правильной ценой. Я восстанавливаю 15 в полезной нагрузке моего типа действия «CHANGE_PRICE», и я изменяю его значение в редукторе.
и за исключением того, что перед обновлением статуса сдаюсь со старым значением и поднимаю старое значение «5» и функция updateprice () создает массив со старым значением
, затем, когда я нажимаю на 40 (например)
, процесс будет делать то же самое, и принять меня примет значение '15' , в основном он учитывает новое значение смещения
Я бы хотел, чтобы рендеринг начинался с нового значения, потому что у меня есть распаковка, я должен дважды нажать, чтобы учесть мой запрос на идеи?
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
updatePrice = () => {
let items =[];
let name = coco;
let price = this.props.price;
let min = 1 ;
let max = this.props.max;
while( min < max) {
min = min + 1
items.push({
name:itemsname
price:price
})
}
this.props.newItemps(items)
}
componentDidMount() {
console.log('componentdidmount')
this.updatePrice()
}
choosePrice = (e) => {
this.props.changePrice(e.target.value)
this.updatePrice()
}
class In extends React.Component {
render(){
return (
<div>
<button value={15}
onClick={this.choosePrice}>
15$
</button>
<button value={30}
onClick={this.choosePrice}>
30$
</button>
<button value={40}
onClick={this.choosePrice}>
40$
</button>
this.props.items.map((item)=> {
<div>
<p>{item.name}</p>
<p>{item.price}</p>
</div>
</div>
});
)
}
}
- рендер
- компонент didmount
- fonction udapteprice (цена = 5)
- элементы массива
когда я щелкаю по значению кнопки = 15
- функция selectPrice (e)
- действие, отслеживаемое в paylaod (15)
- нововведение обновлено , state.price: 15
- визуализация console.log (props.items.price, = 5?!
- функция udapteprice (цена = 5)
- элементы массива
когда я нажимал на кнопку со значением = 40
- функция selectPrice (e)
- действие, отслеживаемое в paylaod (40)
- нововведение обновлено , state.price: 40
- визуализация console.log (props.items.price, = 15?!
- : fonction udapteprice (цена = 15)
- : элементы массива