Блог

Я пытаюсь получить реквизит через объект состояния.

 import React, { Component } from 'react';
import Counter from './counter';


class Counters extends Component {
    state = {
      counters: [
          {id:1, value:1},
          {id:2, value:2},
      ]
    };


    render() {
        return(
            <div>
                this.state.counters.map(counter => (
                    <Counter key={counter.id} value={counter.value}/>))}
            </div>)
    }
}

export default Counters;



import React, { Component } from 'react';

class Counter extends Component {
    state = {
        value: this.props.value
    };

    constructor(){
     super();
    }

    render() {
        console.log(this.props);
        return (
            <div>

            </div>

        );
    }
}

export default Counter;
 

Почему я не могу получить реквизиты в объекте состояния? Я вижу реквизит в рендере.
Я получаю ошибку типа: Не удается прочитать свойство «значение» неопределенного.
Может кто-нибудь показать мне, как правильно передавать реквизит объекту состояния. Я видел, как реквизит проходил таким образом другими программистами.

Спасибо,

Грабить.

Вам нужно перейти props super и определить состояние в конструкторе constructor или удалить его и использовать state напрямую.

CODESANDBOX

 import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value
    };
  }

  render() {
    console.log(this.props);
    return <div>{this.state.value}</div>;
  }
}

export default Counter;
 

или CODESANDBOX

 import React, { Component } from "react";

class Counter extends Component {
  state = {
    value: this.props.value
  };

  render() {
    console.log(this.props);
    return <div>{this.state.value}</div>;
  }
}

export default Counter;