Как установить значение одного свойства объекта, как значение другого свойства этого же объекта? React

Question

Имеется код:

class MyName extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        number: 0,
        name: 'Вася' + this.number
        }
    }
    rebder() {
      ...
    }

Не получается в локальном стейте присвоить свойству name число, из свойства number. Код не приведённый выше не работает. Как это сделать? Понимаю, что загвоздка скорее всего синтаксисе или контексте this, но решение так и не смог найти.

Answer 1

Конструктор по большей части определяет, какие названия стейтов будут у компонента, ну и их стандартное значение. Если нужно оперировать стейтами, можно это сделать в момент монтирования компонента например:

class MyName extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            number: 0,
            name: ''
        }
    }

    componentDidMount() {
        this.setState({
             name: 'Вася' + this.state.number
        })
    }

    render() {
      ...
    }

}

Answer 2

Основной вопрос тут: зависит ли name только от number, или позже будет изменяться отдельно.

Если name зависит только от number, то его лучше не делать стейтом.

Сделайте метод: getName(){ return 'Вася' + this.state.number }

В данном случае вычисление не дорогое, и повышается согласованность.

Для тяжелых вычислений можно использовать useMemo или его аналог.

Если name позже будет изменяться отдельно, то в конструкторе:

const number = 0
const name = 'Вася' + number
this.state = { number, name }

БЛОГ НА HUSL

Как установить значение одного свойства объекта, как значение другого свойства этого же объекта? React

Ответы (2 шт):