Как получить текущее state?

Question

[Артур Кудашев]

Здравствуйте, как получить текущее состояние компонента, а не старое. Пиши калькулятор и на выводе значение вместо текущего результата выводится предыдущий результат.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Actions from './components/actions';
import Value from './components/value';

import './style.css';

class App extends Component {

	state = {
		input: '',
		output: '0'
	};

	checkValue = value => {
		let state = this.state.input;
		let lastState = state[state.length - 1];

		if (value === '+' || value === '-' || value === 'x' || value === '÷') {
			if (lastState === '+' || lastState === '-' || lastState === 'x' || lastState === '÷' || state.length === 0) {
				return false;
			} else {
				return true;
			}
		}

		return true;
	};

	showAnswer = () => {
		let input = this.state.input.split('');

		input.forEach(i => {
			let index = input.indexOf(i);

			if (i === '÷') {
				input.splice(index, 1, '/');
			} else if (i === 'x') {
				input.splice(index, 1, '*');
			}
		});

		input = input.join('');

		try {
			let result = eval(input);

			this.setState({
				output: result
			});

		} catch (error) {
			console.log('Закончите выражение');
		}
	};

	addValue = event => {
		event.persist();

		let currentValue = event.target.textContent;

		if (this.checkValue(currentValue)) {
			if (currentValue === '=') {
				this.setState({
					input: this.state.output.toString()
				});

				this.showAnswer();
			} else if (currentValue === 'C') {
				this.setState({
					input: this.state.input.slice(0, -1)
				});
			} else {
				this.setState(({ input }) => {
					return {
						input: input + currentValue
					};
				});
			}
		}
	};

	render() {
		const actions = [
			{ label: '%', className: 'action white-button' },
			{ label: '+', className: 'action white-button' },
			{ label: 'C', className: 'action white-button' },
			{ label: '÷', className: 'action purple-button' },

			{ label: '7', className: 'action white-button' },
			{ label: '8', className: 'action white-button' },
			{ label: '9', className: 'action white-button' },
			{ label: 'x', className: 'action purple-button' },

			{ label: '4', className: 'action white-button' },
			{ label: '5', className: 'action white-button' },
			{ label: '6', className: 'action white-button' },
			{ label: '-', className: 'action purple-button' },

			{ label: '1', className: 'action white-button' },
			{ label: '2', className: 'action white-button' },
			{ label: '3', className: 'action white-button' },
			{ label: '+', className: 'action purple-button' },

			{ label: '0', className: 'action white-button' },
			{ label: '.', className: 'action white-button' },
			{ label: '=', className: 'action', id: 'equally' }
		];

		return (
			<div id='calculator'>
				<Value input = { this.state.input } output = { this.state.output }/>
				<Actions actions = { actions } addValue = { this.addValue }/>
			</div>
		);
	}
}

ReactDOM.render(<App />, document.getElementById('main-wrap'));

Comments

[Anton Filippov]

Приложите ваш код, чтобы вам смогли помочь

[Артур Кудашев]

Anton Filippov, приложил

[Anton Filippov]

Артур Кудашев, вам этот весь код можно сократить в 5 раз) уж очень много вы странного делаете, советую браться не за реакт, а за изучение javascript

[Артур Кудашев]

Anton Filippov, знаю. Я делаю черновой вариант. Потом буду убирать лишний код. Мне сейчас надо, чтобы все работало.

Answer 1

[0xD34F]

this.setState({
  input: this.state.output.toString()
});

this.showAnswer();

В showAnswer вы, надо полагать, ждёте, что свойство input будет равно output.toString(). Это вряд ли. Читаем документацию внимательнее:

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

Ну и про использование колбека там дальше. Так что правильно будет как-то так:

this.setState({
  input: this.state.output.toString()
}, this.showAnswer);

Comments

[Артур Кудашев]

0xD34F, я прочитал документацию и понял ошибку, но теперь в state и input и output равно нулю.

[0xD34F]

Артур Кудашев, знаете, очень тяжело вот так вот пялиться на код (огрызок кода, вы показали не всё), и пытаться представить, что там происходит, где возникает косяк, о котором вы говорите и как вообще он реально проявляется.

На будущее - код показывайте целиком, и не просто целиком, а чтобы можно было посмотреть результат его работы. Для этого есть песочницы, такие как codesandbox или stackblitz, например. А говоря о своей проблеме - рассказывайте, как её воспроизвести, по шагам. Типа - кликаем туда, вводим то, что ожидаем увидеть, что видим реально.

Ну и предположу, что не надо вам ничего копировать в input, просто дёргайте showAnswer (а внутри него, соответственно, вместе с выводом результата сбрасывайте значение input).