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 的新手。我收到此错误，但我不明白原因，因为在 app.js 中声明了我的'诊断'数组。另外，我在所有代码下都放置了 Switch 块，但是它不起作用。你能帮我吗？

谢谢。

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道具。我们应该检查一下。

另一个问题是您的路线定义。可能您想做这样的事情：

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

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

为保证我们在上面的修复程序中尝试此代码，

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

Answer 2

尝试更改此部分：

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

收件人：

           <Switch>
                <Route path='/diagnosis' render={() => <Diagnosis diagnosis={this.props.diagnosis}/>}/>
                <Route path='/diagnosis:id' component={ChosenDiagnosis}/>
            </Switch>

映射函数错误：无法读取Reactjs中未定义的属性“ map”

2 个答案: