Javascript ReactJS-无法读取状态对象上的this.props.value

我刚刚开始学习ReactJS，在编译代码时遇到了一个错误：

TypeError:无法读取未定义的属性“值”

错误发生在此行：

count:this.props.value

文件

counter.jsx

如您所见，我尝试在

counter.jsx

上的渲染函数上使用

console.log（this.props）

，以验证是否设置了props。它们已经设置好了，所以我不知道为什么我不能在计数器类的state对象中访问它

问题：我做错了什么

counter.jsx:

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: this.props.value,
        tags: []
    };

    render(){
        console.log(this.props);
        return (<React.Fragment>
                    <span>{this.formatCount()}</span>
                </React.Fragment>
        );
    }

    formatCount(){
        var { count } = this.state;
        return count === 0 ? <h1>Zero</h1> : count;
    }
}
export default Counter;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';

import Counters from './components/counters';

ReactDOM.render(<Counters />, document.getElementById('root'));
registerServiceWorker();

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

class Counters extends Component {
    state = {
        counters: [
        {id: 1, value: 4},
        {id: 2, value: 0},
        {id: 3, value: 0},
        {id: 4, value: 0},
        ]
    };
    render(){
        return (
            <div>
            {this.state.counters.map(counter => (<Counter key={counter.id} value={counter.value} selected={true} />))}
            </div>
        );
    }
}

export default Counters;

import React，{Component}来自'React'；
类计数器扩展组件{
状态={
计数：this.props.value，
标签：[]
};
render（）{
console.log（this.props）；
返回(
{this.formatCount（）}
);
}
formatCount（）{
var{count}=this.state；
返回计数===0？零：计数；
}
}
导出默认计数器；

index.js:

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: this.props.value,
        tags: []
    };

    render(){
        console.log(this.props);
        return (<React.Fragment>
                    <span>{this.formatCount()}</span>
                </React.Fragment>
        );
    }

    formatCount(){
        var { count } = this.state;
        return count === 0 ? <h1>Zero</h1> : count;
    }
}
export default Counter;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';

import Counters from './components/counters';

ReactDOM.render(<Counters />, document.getElementById('root'));
registerServiceWorker();

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

class Counters extends Component {
    state = {
        counters: [
        {id: 1, value: 4},
        {id: 2, value: 0},
        {id: 3, value: 0},
        {id: 4, value: 0},
        ]
    };
    render(){
        return (
            <div>
            {this.state.counters.map(counter => (<Counter key={counter.id} value={counter.value} selected={true} />))}
            </div>
        );
    }
}

export default Counters;

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
导入'bootstrap/dist/css/bootstrap.css'；
从“./组件/计数器”导入计数器；
ReactDOM.render（，document.getElementById（'root'））；
registerServiceWorker（）；

counters.jsx:

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: this.props.value,
        tags: []
    };

    render(){
        console.log(this.props);
        return (<React.Fragment>
                    <span>{this.formatCount()}</span>
                </React.Fragment>
        );
    }

    formatCount(){
        var { count } = this.state;
        return count === 0 ? <h1>Zero</h1> : count;
    }
}
export default Counter;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';

import Counters from './components/counters';

ReactDOM.render(<Counters />, document.getElementById('root'));
registerServiceWorker();

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

class Counters extends Component {
    state = {
        counters: [
        {id: 1, value: 4},
        {id: 2, value: 0},
        {id: 3, value: 0},
        {id: 4, value: 0},
        ]
    };
    render(){
        return (
            <div>
            {this.state.counters.map(counter => (<Counter key={counter.id} value={counter.value} selected={true} />))}
            </div>
        );
    }
}

export default Counters;

import React，{Component}来自'React'；
从“./Counter”导入计数器；
类计数器扩展组件{
状态={
计数器：[
{id:1，值：4}，
{id:2，值：0}，
{id:3，值：0}，
{id:4，值：0}，
]
};
render（）{
返回(
{this.state.counters.map（counter=>（））}
);
}
}
导出默认计数器；

此

中的

此。props

指的是由JSX

创建的对象。因此，要访问

计数器

类实例的

this

，需要使用

构造函数

函数

constructor(props) {
  super(props);
  this.state = {
    count: props.value,
    tags: []
  };
}

您现在要创建的状态是指向

计数器

类本身，而不是它的实例，这就是为什么

this.props

是

未定义的

。在方法的帮助下，您可以在不使用构造函数的情况下执行相同的操作

getDerivedStateFromProps

在调用渲染之前被调用 方法，无论是在初始装载时还是在后续更新时。它应该 返回对象以更新状态，或返回null以不更新任何内容

---

尝试在构造函数中设置状态，我怀疑

这个
被破坏了

 constructor(props) {
   super(props);
   this.state = {
    count: props.value,
    tags: []
   }
}

不建议直接从道具设置状态对象的值。最好是：

state = {
    count: null,
    tags: []
};

componentDidMount() {
    this.setState({ count: this.props.value });
}

如果你愿意这样写的话，我想应该是一个字。这样写是为了在使用道具之前验证道具上是否存在该值

state = {
        count: this.props.value ? this.props.value : null,
        tags: []
    };

在counter.jsx中，添加：

constructor(props) {
    super(props);
} 

您需要添加一个带有'props'参数的构造函数，并调用super（props）。直接使用道具设置状态。
无需在
componentDidMount
中进行设置，
constructor
或
getDerivedStateFromProps
就可以了。实际上，没有，值没有定义，道具是，因此这仍然会导致错误（不管它与错误无关）