У меня есть файл json, содержащий массив с некоторыми объектами с именем json.bc, показанными запросом fetch(). В каждом элементе есть функция с именем renderTotal. Значение <span className = "Total-Price"></span> будет вызываться renderTotal. В рендере есть кнопка с помощью функции onclick:
<button onClick = {((e)=>this.ChangePrice(e,this.renderChangePrice(element)))}>Select</button>
Значение renderTotal будет изменено функцией ChangePrice. Давайте отладим, что происходит в renderTotal:
renderTotal(element, NewAmount) {
let Total = element.total
if (NewAmount == '') {
return new Intl.NumberFormat().format(Total)
} else {
return Total + NewAmount
}
}
Вывод renderTotal зависит от NewAmount, по умолчанию NewAmount равен нулю, и в соответствии с кодом, если NewAmount равен нулю, вывод renderTotal будет element.total, но при запуске функции ChangePriceNewAmount не равен нулю:
renderChangePrice(element){
return 1000
}
ChangePrice = (e,elem) =>
this.setState(
{
NewAmount: elem
},
() => {
this.reorganiseLibrary();
}
)
Например, при запуске ChangePriceNewAmount будет равно 1000, и в соответствии с условием в renderTotal вывод renderTotal будет Total + NewAmount. Например, вывод renderTotal:
1000,5000,2000
запустив ChangePrice это будет:
2000,6000,3000
Чтобы знать, что все в порядке, но когда я хочу запустить ChangePriceво второй раз, я хочу, чтобы результат был таким:
3000,7000,4000
Я имею в виду, что NewAmount будет добавлен к последнему выводу renderTotal, а не к выводу по умолчанию renderTotal, но я снова получаю:
2000,6000,3000
И каждый раз при запуске ChangePrice вывод renderTotal будет NewAmount + последний вывод renderTotal. Как мне это сделать?
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
library: null,
NewAmount: "",
}
}
componentDidMount() {
fetch('/json.bc', {
method: 'POST',
})
.then(response => response.text())
.then(text => {
const Maindata = JSON.parse(text.replace(/\'/g, '"'))
this.setState(state => ({
...state,
data: Maindata
}), () => {
this.reorganiseLibrary()
})
}).catch(error => console.error(error))
}
reorganiseLibrary = () => {
const { data } = this.state;
let library = data;
library = _.chunk(library);
this.setState({library})
}
handlePerPage = evt => {
this.setState({
perPage: evt.target.value
}, () => this.reorganiseLibrary());
}
// handle render of library
renderLibrary = () => {
const { library } = this.state;
if (!library || (library && library.length === 0)) {
return <div className = "nodata">No data</div>
}
return library.map((item, i) => (
<div>
<span className = "Total-Price">{this.renderTotal(item, this.state.NewAmount)}</span>
</div>
))
}
render() {
const { library } = this.state;
return (
<div>
{this.renderLibrary()}
<button onClick = {((e)=> this.ChangePrice(e,this.renderChangePrice(element)))}>Select</button>
</div>
)
}
renderTotal(element, NewAmount) {
let Total = element.total
if (NewAmount == '') {
return new Intl.NumberFormat().format(Total)
} else {
return Total + NewAmount
}
}
renderChangePrice(element){
return 1000
}
ChangePrice = (e,elem) =>
this.setState(
{
NewAmount: elem
},
() => {
this.reorganiseLibrary();
}
)
}
ReactDOM.render(<App />, document.getElementById('Result'))
Отредактировано:
renderTotal(element, NewAmount) {
let Total = element.total
if (NewAmount == '') {
return new Intl.NumberFormat().format(Total)
} else {
let SliceElementSign = NewAmount.slice(0,1)
let SliceElementNumber = parseInt(NewAmount.substr(1))
if (SliceElementSign=='+'){
return Total+SliceElementNumber
}else{
return Total-SliceElementNumber
}
}
}





Я вижу, что в вашем коде есть пара проблем.
NewAmount с '' на 1000, а затем оно остается в 1000 навсегда. Вы также не обновляете значение до 1000, 2000, 3000....NewAmount, по крайней мере, вы обновите значение library элемента Total до последнего.В настоящее время каждый раз, когда вызывается ChangePrice, он устанавливает NewAmount в 1000, потому что renderChangePrice всегда возвращает 1000 и добавляется к старому значению элемента Total.
Обновление логики ChangePrice, как показано ниже, может помочь.
ChangePrice = (e, elem) => {
this.setState(
{
NewAmount: (this.state.NewAmount || 0) + elem
},
() => {
this.reorganiseLibrary();
}
)
}
На самом деле NewAmount будет примерно таким: число по знаку + или -, например +1000 или -2000, и, как я уже упоминал, оно будет меняться каждый раз. Таким образом, renderTotal будет чем-то, что вы можете увидеть в части Редактировать моего кода.
И когда я console.info(SliceElementNumber) , это будет всегда 0 и каждый раз эта часть будет сделана : Total-SliceElementNumber
Когда NewAmount является числом без знака, проблем нет, но с + или - это не работает.
Я думаю, это не будет проблемой, вам придется вернуть -1000 из renderChangePrice
Но if условие в renderTotal не будет работать корректно. Когда я получаю console.info() в if и else, это правильно, но число не будет правильно рассчитано
Когда он собирается просто минус или просто сумма чисел, все правильно, но когда он собирается как минус, так и сумма чисел, результат неверен
Привет, @Ashish.
NewAmountбудет изменен. Например, я установил1000, чтобы показать, что он должен добавляться вrenderTotalкаждый раз, когда выполняется функцияChangePrice.