Home / Questions / 39291
Accepted
Sergio Romero
Asked: 2020-12-15 20:43:50 +0800 CST 2020-12-15 20:43:50 +0800 CST

在 React Js（ecma2015）中渲染内部调用函数

  • 772

使用 ecmaScript 2015 在 React js 中提供帮助 如何在 render(){} 方法中调用方法我收到错误Cannot read property 'ss' of undefined(... 错误在哪里？？我无法调用我的ss函数在方法 render() 中制作 :(

import React from 'react'

      class Saludo extends React.Component {
        constructor(){
         super();
         this.state={lista:[]};
        }


        componentWillMount() {
            fetch('http://localhost/viaLacteaQuery.php')
              .then((response) => {
                return response.json();
              })
              .then((data) => {
                   this.setState({lista:data.data.records});
              })
          }


         ss(){
          return  Math.random();
        }


        render() {
            return (
              <div>
                <h1>Saluditos!!</h1>

                {
                  this.state.lista.map(function(item) {
                    <ul>
                     return (
                       <ul>
                       <li key={this.ss()}>{item.nombre}</li>
                       <li key={this.ss()}>{item.cuenta}</li>
                       <li key={this.ss()}>{item.precio}</li>
                       </ul>
                     )
                  </ul>
                  })

                }

              </div>


          )
        }
      }

      export default Saludo;

没有这个功能，它对我来说很好。

javascript

1 Answers

  1. Best Answer

    您必须在退货前删除标签，或者如果您需要标签，请将其放在退货中。

    您还缺少 map 函数的上下文，您可以使用箭头函数或将上下文绑定到函数：


    没有 ul 标签： 

                {
                this.state.lista.map((item) => {
                        return (
                        <ul>
                            <li key={this.ss()}>{item.nombre}</li>
                            <li key={this.ss()}>{item.cuenta}</li>
                            <li key={this.ss()}>{item.precio}</li>
                        </ul>
                        )
                })

            }



                {
                this.state.lista.map((function (item) {
                        return (
                        <ul>
                            <li key={this.ss()}>{item.nombre}</li>
                            <li key={this.ss()}>{item.cuenta}</li>
                            <li key={this.ss()}>{item.precio}</li>
                        </ul>
                        )
                }).bind(this))

            }


    使用 ul 标签： 

                {
                this.state.lista.map((item) => {
                    return (
                        <ul>
                            <ul>
                                <li key={this.ss()}>{item.nombre}</li>
                                <li key={this.ss()}>{item.cuenta}</li>
                                <li key={this.ss()}>{item.precio}</li>
                            </ul>
                        </ul>
                    )
                })

            }



                {
                this.state.lista.map((function (item) {
                    return (
                        <ul>
                            <ul>
                                <li key={this.ss()}>{item.nombre}</li>
                                <li key={this.ss()}>{item.cuenta}</li>
                                <li key={this.ss()}>{item.precio}</li>
                            </ul>
                        </ul>
                    )
                }).bind(this))

            }
    • 1