Существует множество настроек состояния, я думаю, что мы можем уменьшить их, и есть небольшой рефакторинг, который мы можем сделать, чтобы ваш код было легче читать.
Конструктор
Вы печатаете одно и то же снова и снова, и это делает ваш конструктор намного труднее для чтения, чем он должен быть.
В этом примере мы взяли значение this.props.navigation.state.params и установили для него собственную переменную. Это означает, что вам не нужно постоянно набирать this.props.navigation.state.params снова и снова.
constructor(props) {
super(props);
const params = this.props.navigation.state.params
this.state = {
pCost: params.prodCost,
pMargin: params.mfdProfitMargin,
mCost:params.mCost,
igstP: params.igst,
igstV: params.igstV,
cgstP: params.cgst,
cgstV: params.cgstV,
sgstP: params.sgst,
sgstV: params.sgstV,
m2wV: params.m2wV,
whProfit: params.whProfit,
whProfitV: params.whProfitV,
w2rT: params.w2rT,
w2rV: params.w2rV,
rtProfit:params.rtProfit,
rtProfitV: params.rtProfitV
}
}
Если мы используем оператор распространения, мы можем сделать это еще проще, то есть если вы хотите использовать то же имя, что и в объекте, который вы передаете.
constructor(props) {
super(props);
this.state = {
...this.props.navigation.state.params
}
}
Однако, если вы воспользуетесь этим методом, то обнаружите, что некоторые из выбранных вами уникальных имен пропадут и будут заменены теми, которые находятся в передаваемом вами объекте.
Я предполагаю, что вы выберете первый вариант (поскольку он не меняет имена), поэтому я буду основывать на этом мои следующие рефакторы.
Рассчитать сумму
Здесь слишком много setStates. Требуется время для установки состояния, поэтому вы можете использовать старые значения в ваших последующих вычислениях, поэтому лучше не использовать setState, пока вы не выполнили все свои вычисления. Если значения для каждого setState зависят от предыдущих значений, то вы можете сделать что-то подобное, используя только значения из начального состояния, где это необходимо.
calculateSum () => {
let mCost = Number(this.state.prodCost) + Number(this.state.mfdProfitMargin);
let igstV = mCost * Number(this.state.igst) / 100;
let m2wV = mCost + igstV;
let whProfitV = m2wV * Number(this.state.whProfit)/100;
let w2rT = m2wV + whProfitV;
let cgstV = w2rT * Number(this.state.cgst)/100;
let sgstV = w2rT * Number(this.state.sgst)/100;
let w2rV = w2rT + cgstV + sgstV;
let rtProfitV = w2rV * Number(this.state.rtProfit)/100;
return { mCost, igstV, m2wV, whProfitV, w2rT, cgstV, sgstV, w2rV, rtProfitV }
}
Здесь я возвращаю объект со всеми обновленными значениями, которые можно сохранить в состояние, если мы так решим.
Вычислить
Поскольку функция calculateSum теперь возвращает объект со всем значением, которое вы хотите, вы можете сделать что-то вроде этого. Мы берем только что вычисленный объект суммы и с помощью оператора распространения устанавливаем все эти объекты в состояние. Затем мы используем обратный вызов функции setState, чтобы затем перейти к следующей странице, снова используя оператор распространения, чтобы захватить все значения, которые находятся в состоянии.
calculate = () => {
let sum = this.calculateSum();
this.setState({...sum}, () => {
this.props.navigation.navigate('Result', {...this.state })
});
}
Однако, если эти значения не нужно сохранять в состояние и просто передавать на следующий экран, мы можем обновить функцию calculate до чего-то подобного
calculate = () => {
let sum = this.calculateSum();
this.props.navigation.navigate('Result', {...this.state, ...sum })
}
Надеюсь, это поможет вам.
Дополнительную информацию об операторе распространения в javascript смотрите в этой статье.
https://zendev.com/2018/05/09/understanding-spread-operator-in-javascript.html
Для получения дополнительной информации о настройке состояния ознакомьтесь с обеими этими статьями.
https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0
https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296