时间戳

首页 > 解决方案 > 尝试在 React JS 中破坏数组时显示错误

javascript - 尝试在 React JS 中破坏数组时显示错误

问题描述

我从道具中获取“问题”列表，当我尝试使用以下代码对其进行解构时const {issues} = this.props，出现 2 个错误：

1-

Cannot read property 'length' of undefined

2-

index.js:1 The above error occurred in the <Issues> component:
    in Issues (at App.js:46)
    in component (created by Context.Consumer)
    in Route (at App.js:46)
    in div (at App.js:39)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:38)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

这是课程

class Issues extends Component{
    render(){ 
        const {issues} = this.props;
        const issuesList = issues.length ? (
            issues.map(issue => {

                return(
                    <div className='issues container'>
                        <h1 className='center'>Issues</h1>
                        <div className='center card-content'>

                        <span className="card-title" key={issue.id}>{issue.title}</span>

                        </div>
                    </div>
                )

            })
        ) : (<div className="center">no Issues for this member</div>)
    return(
        <div className="container">
        {issuesList}

        </div>
    )
    }
}
export default Issues;

这是主要的APP类

        class App extends Component {
      state = {
        username: null,
        repos:[],
        issues:[]
      }

      fireSearch = (username) => {
        axios.get('https://api.github.com/users/'+ username +'/repos').then(res => {
                  this.setState({

                      repos: res.data

                  })
              })
      }
      enterIssues = (urlstring) => {

        axios.get('https://api.github.com/' + urlstring).then(res => {
          this.setState({
            issues: res.data
          })
          }

        )

      }
      render(){
      return (
        <BrowserRouter>
        <div className="App">
        <Navbar />

        <Route exact path='/Addform' component={Addform} />
        <Route exact path='/:username' component={Repos} fireSearch={this.fireSearch} />
        <Addform fireSearch={this.fireSearch} />
        <Repos repos={this.state.repos} enterIssues={this.enterIssues} />
        <Route exact path='/:username/:repository' component={() => <Issues Issues={this.state.issues} />}  />

        </div>
        </BrowserRouter>
      );
    }

    }
    export default App;

标签： javascriptreactjs

解决方案

issues您的 App 类中的道具大写不正确：

<Route exact path='/:username/:repository' component={() => <Issues Issues={this.state.issues} />}  />

应该

<Route exact path='/:username/:repository' component={() => <Issues issues={this.state.issues} />}  />

推荐阅读