Как обновить объект json в Reactjs

У меня есть файл 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
    }
    }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
4 355
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я вижу, что в вашем коде есть пара проблем.

  1. Вы меняете состояние NewAmount с '' на 1000, а затем оно остается в 1000 навсегда. Вы также не обновляете значение до 1000, 2000, 3000....
  2. Если вы не хотите обновлять значение NewAmount, по крайней мере, вы обновите значение library элемента Total до последнего.

В настоящее время каждый раз, когда вызывается ChangePrice, он устанавливает NewAmount в 1000, потому что renderChangePrice всегда возвращает 1000 и добавляется к старому значению элемента Total.

Обновление логики ChangePrice, как показано ниже, может помочь.

ChangePrice = (e, elem) => {
    this.setState(
        {
            NewAmount: (this.state.NewAmount || 0) + elem
        },
        () => {
            this.reorganiseLibrary();
        }
    )
}

Привет, @Ashish.NewAmount будет изменен. Например, я установил 1000, чтобы показать, что он должен добавляться в renderTotal каждый раз, когда выполняется функция ChangePrice.

sahar 10.06.2019 07:38

На самом деле NewAmount будет примерно таким: число по знаку + или -, например +1000 или -2000, и, как я уже упоминал, оно будет меняться каждый раз. Таким образом, renderTotal будет чем-то, что вы можете увидеть в части Редактировать моего кода.

sahar 10.06.2019 07:56

И когда я console.info(SliceElementNumber) , это будет всегда 0 и каждый раз эта часть будет сделана : Total-SliceElementNumber

sahar 10.06.2019 07:58

Когда NewAmount является числом без знака, проблем нет, но с + или - это не работает.

sahar 10.06.2019 08:20

Я думаю, это не будет проблемой, вам придется вернуть -1000 из renderChangePrice

Ashish 10.06.2019 08:34

Но if условие в renderTotal не будет работать корректно. Когда я получаю console.info() в if и else, это правильно, но число не будет правильно рассчитано

sahar 10.06.2019 09:26

Когда он собирается просто минус или просто сумма чисел, все правильно, но когда он собирается как минус, так и сумма чисел, результат неверен

sahar 10.06.2019 09:52

Другие вопросы по теме