Question

我正在尝试将状态的长度呈现到屏幕上，并且一直告诉我，无法读取未定义的length属性。当我尝试将状态值记录到控制台时，起初它是未定义的，运行搜索后更新了值，并且数组中有5个项目。现在的问题是更新时，它不会在屏幕上更新，或者崩溃。

export default class App extends Component {
    state={
       vidoes:[]
   };

    onTermSubmit = async term =>{
   const response = await youtube.get('/search',{
        params:{
            q:term,
        }
    });

    this.setState({videos:response.data.items})
   };



    render() {
        console.log(this.state.videos)
        return (
            <div className="ui container">
                <SearchBar onFormSubmit={this.onTermSubmit}/>
                {this.state.vidoes.length}
            </div>
        )
    }

最终的目标是使状态的长度在屏幕上呈现，并且由于现在状态被描述为未定义，因此不可能循环遍历它。

Answer 1

尝试一下

  export default class App extends Component {
            state={
               videos:[]
           };

            onTermSubmit = async term =>{
           const response = await youtube.get('/search',{
                params:{
                    q:term,
                }
            });

            this.setState({videos:response.data.items})
           };



            render() {
                console.log(this.state.videos)
                return (
                    <div className="ui container">
                        <SearchBar onFormSubmit={this.onTermSubmit}/>
                        {this.state.videos.length}
                    </div>
                )
            }

Answer 2

有一些错字videos。请使用渲染方法将其更改为this.state.videos.length。

render() {
        console.log(this.state.videos)
        return (
            <div className="ui container">
                <SearchBar onFormSubmit={this.onTermSubmit}/>
                {this.state.videos.length}
            </div>
        )
    }

希望这对您有用。

无法读取未定义的length属性

2 个答案: