javascript - map 功能错误: Cannot read property 'map' of undefined in Reactjs

Question

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import endoskopi from '../Images/endoskopi.jpg';
import '../Css/diagnosis.css'
import {Route,Switch,BrowserRouter,Link} from 'react-router-dom'
import ChosenDiagnosis from "./ChosenDiagnosis";
import App from "./App";


class Diagnosis extends Component {
  constructor(props) {
    super(props);
}


static propTypes = {
    diagnosis: PropTypes.array
};


render() {
    return (
        <BrowserRouter>
            <div>
                <Switch>
                    <Route path='/diagnosis' component={App}/>
                    <Route path='/diagnosis/:id' component={ChosenDiagnosis}/>
                </Switch>

                <div className="row">
                    {( this.props.diagnosis || [] ).map(diagnosis =>{
                        return (<div key={diagnosis.id} className="col-md-4" style={{marginTop:"2rem"}}>
                            <div className="diagnosis-box">
                                <img className="diagnosis-img" src={endoskopi} alt={diagnosis.name}/>
                                <div className="diagnosis-text">{diagnosis.name}</div>
                                <Link to={`/diagnosis/${diagnosis.id}`}>
                                    <button className={"diagnosis-button"}>Ücreti Sorgula</button>
                                </Link>
                            </div>
                        </div>)
                    })}
                </div>
            </div>
        </BrowserRouter>

    );
  }
}

export default Diagnosis;

您好，我是 Reactjs 的新手。我收到此错误，但我不明白原因，因为我的 'diagnosis' 数组已在 app.js 中声明。另外，我将“Switch” block 放在所有代码下，但它不起作用。你能帮我一下吗？

提前谢谢您。

class App extends Component {
constructor(props) {
    super(props);
}

state={
  diagnosis: [
      {
          name: "EKG",
          id: 1
      },
      {
          name: "Ultrason",
          id: 2
      },
      {
          name: "MR",
          id: 3
      },
      {
          name: "Röntgen",
          id: 4
      },
      {
          name: "EEG",
          id: 5
      },
      {
          name: "EMG",
          id: 6
      },
      {
          name: "Kan Testi",
          id: 7
      },
      {
          name: "İdrar Testi",
          id: 8
      },
      {
          name: "Tomografi",
          id: 9
      },
      {
          name: "Endoskopi",
          id: 10
      },
  ]
};


render() {
return (
  <div className="App">
    <Navbar/>
    <Diagnosis diagnosis={this.state.diagnosis}/>
  </div>
);

} }

export default App;

这也是我的另一个组件，App.js。 (应要求编辑)

Answer 1

有了这些静态数据，您的代码应该可以实际工作。您不必在这里使用任何条件渲染。但是您问题中的错误表明，当您的组件第一次渲染时，当时没有任何 diagnosis Prop 。我们应该检查一下。

另一个问题在于您的路线定义。也许您想做类似的事情:

<Switch>
    <Route path='/diagnosis' component={Diagnosis}/>
    <Route path='/diagnosis/:id' component={ChosenDiagnosis}/>
</Switch>

看这部分:path='/diagnosis/:id'。

为了保证让我们在您的代码中尝试使用上面的修复:

{( this.props.diagnosis || [] ).map(diagnosis => { ....