ReactJS，未在控制台上获取输出

Question

ItemsNumber组件：没有得到console.log(length(的期望输出，而是没有定义，但控制台上显示了hello。

import React, { Component } from 'react';
class ItemsNumber extends Component {
state = {
movies: this.props
}
count = 0;
ItemsCounting = () =>{
const length = this.state.movies.length()
console.log(length)
console.log('hello')
}
render(props) {
return (
<div>
{this.ItemsCounting()}
</div>
);
}
}
export default ItemsNumber;

FakeMovieAPI文件：这个文件有10个项目。此值10必须通过控制台显示。log(长度(

const Movies = [
{
id: 'm7pbc81a',
title: 'Matrix',
Year: 1999,
genre: { id: '193x', name: 'Sci-fi' },
ratings: 8.7,
cost: 15
},
....... 
]
export function getMovies() {
return Movies;
}

应用程序组件：

import React, { Component } from 'react';
import { getMovies } from './Files/FakeMovieAPI';
import ItemsNumbers from './Pagination/ItemsNumber';
import Table from './Pagination/Table';
class App extends Component {
state = {
movies: getMovies()
}
render() {
return (
<div className="App">
<h2 className="d-inline bg-success"> Motion Pictures Stall </h2>
<Table movies={this.state.movies} />
<ItemsNumbers items={this.state.movies} />
</div>
);
}
}
export default App;

控制台上的输出为：

未定义

你好

Answer 1

因为您没有在ItemsNumber上使用props项。您需要像这样更新声明状态：

state = {
movies: this.props.items
}

当您使用：movies: this.props时，movies将是一个属性为items的对象，如下所示：

movies = {
items: [...]
}

所以this.state.movies.length()就是undefined。

Answer 2

因为您没有从函数返回任何内容，所以它是未定义的。从下面的函数返回您的值

ItemsCounting = () =>{
const movieLength = this.state.movies.items.length;
console.log(movieLength)
console.log('hello')
return movieLength;
}

使用此的更好方法

render() {
return (
<div>
{this.props?.movies.items?.length}
</div>
);
}

Answer 3

您正在将电影状态作为道具传递给App.js中的ItemsNumber，如下所示：

<ItemsNumbers items={this.state.movies} />

因此，ItemsNumber.js中的this.ops将您的电影数组包含在一个名为items的键中。

最好使用console.log(this.props(来查看那里的数据形状。

此外，长度是Array的属性，而不是方法。