如何在路线中放置功能

Question

作为初学者，我正在尝试将我的"客户端"列表放在以在路由/组件中显示的函数中，这是可能的吗？

app.js

  render() {
    return (
      <div className = "App">
      <div>
          <AddCliente onAdd = {this.onAdd} />
            </div>   
           <Router>
      <div>
              <Link to = "/">Cli</Link>
        <Route path = "/" exact component = {Adde} />
      </div>
    </Router>
      </div>
    );
  }
}

我想这样做：

function Adde() {
  return   <div>
  {
    this.state.clientes.map(cliente => {
      return (
       <ClienteItem
       key = {cliente.nome}
       {...cliente}
       onDelete = {this.onDelete}
       />
      );
    })
  }
   </div>;
}

export default Add;

错误：

TypeError: Cannot read property 'state' of undefined

Answer 1

您可以在组件中做类似的事情。

import React, { Component } from 'react';
class componentName extends Component {
   constructor(props) {
        super(props);
        this.state = {
         clients:[
         {
         name:'sdfd',
         title:'sdfd'
         }
         ]
        };
    }
    Adde=()=>{
      return(
          <div>
          {
            this.state.clientes.map(cliente => {
               return (
                 <ClienteItem
                      key = {cliente.nome}
                      {...cliente}
                      onDelete = {this.onDelete}
                   />
                );
            })
          }
          </div>
      );
    }
    render() {
        return (
          <div className = "App">
           <div>
             <AddCliente onAdd = {this.onAdd} />
           </div>   
          <Router>
            <div>
             <Link to = "/">Cli</Link>
             <Route path = "/" exact component = {Adde} />
            </div>
          </Router>
         </div>
       );
    }
}

export default componentName;