相关疑难解决方法(0)

我正在使用Reactjs编写一个菜单组件.

"use strict";

var React = require("react");
var Menus = React.createClass({

    item_url: function (item,categories,articles) {
        console.log('afdasfasfasdfasdf');
        var url='XXX';
        if (item.type == 1) {
            url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', {slug: categories[item.categoryId].slug});
        } else if (item.type == 2) {
            url = item.articleId == null ? 'javascript:void(0)' : path('buex_portal_view_article', {slug: articles[item.articleId].slug, id: item.articleId});
        } else {
            url = item.url;
        }
        return url;
    },

    render: function () {
     //   console.log(this.props.menus);  // return correctly
            var menuElements = this.props.menus.map(function (item1) { // …

这是我之前的问题的一个跟进,但如果我在其中有一个映射,我如何在React的render()方法中调用一个函数.

示例(此代码位于扩展的类中React.Component):

getItemInfo(item){
  return `${item.Something} ${item.SomethingElse}`
}

render() {

return (
 <div className="someDiv">
    {
      collection.map(function (item) {
        return <div> {item.Name} {this.getItemInfo(item)} </div>
    })
  }
 </div>
);

}

无论我尝试什么,我总是得到"this.getItemInfo()不是一个函数".

我做了console.log对this我的内部map()功能,这是逸岸指的Window对象,但我似乎无法找到一种方法来改变这种状况.

我累了:

• 定义getItemInfo为函数getItemInfo(){..}
• this作为第二个参数传递给我的map函数
• 调用this.getItemInfo = this.getItemInfo.bind(this)react的组件构造函数
• 调用.bind(this)后getItemInfo(item)

还有其他几件事......

没有用.我对JavaScript的this参考相当新,我似乎无法弄明白.

我在这里阅读了一些与使用内部相关的答案,render()但它们似乎都不适合我.

我有我的表视图.我有posfields通过使用map函数完善显示.但我的问题是当我试图在posfields map函数中映射td时它向我抛出错误"未定义的''标题'".

{
  this.POSFields.map(function (posFields, POSFieldsId) {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map(function (headers) {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  })
}

我敢肯定，这是一个简单的问题，但实际上我找不到我的错误在哪里。我有一个组件，其中一个对象没有固定数量的属性。实际上，我无法显示对象的所有属性。

import React, { Component } from 'react';

class FreightRelayWithPricesAndAreas extends Component {

    constructor(props) {
        super(props);
        this.state = {
          freightRelayPrice: props.freightRelayPrice
        };
    }

    render() {
      const Fragment = React.Fragment;
      return (
        <Fragment>
          <tr>
            {
              Object.keys(this.state.freightRelayPrice).map(function(key) {
                  return <td className="whiteSpaceNoWrap">{ this.state.freightRelayPrice[key] }</td>
              })
            }
          </tr>
        </Fragment>
      )
    }
}

export default FreightRelayWithPricesAndAreas

错误总是：

app.js:57763 未捕获的类型错误：无法读取未定义的属性“状态”

在 app.js:57763

在 Array.map()

在 FreightRelayWithPricesAndAreas.render (app.js:57759)

在finishClassComponent (app.js:48488)

在 updateClassComponent (app.js:48465)

在开始工作 (app.js:48840)

在 performUnitOfWork (app.js:50839)

在 workLoop (app.js:50903)

在 HTMLUnknownElement.callCallback (app.js:41157)

在 Object.invokeGuardedCallbackDev (app.js:41196) …

嘿伙计们,我正在尝试渲染一个表中的反应,该表在单击状态时将行设置为选中状态.

单击该行时,我收到如下错误: Uncaught TypeError: Cannot read property 'setSelected' of undefined

有很多关于这个的问题,解决方案似乎是将这一行添加this.setSelected = this.setSelected.bind(this);到构造函数中,以便实际可以访问该函数.

我已经知道要做到这一点,正如你在下面看到的那样,我已经完成了它,它仍然给我错误.我完全难过了.

import React, { Component } from 'react';

class ShowsList extends Component {
  constructor(props) {
    super(props);
    this.state = {selected: {showID: null, i: null}};
    this.setSelected = this.setSelected.bind(this);
  }

  setSelected(event, showID, i) {
    this.setState({
      selected: {showID, i}
    });
    console.log(this.state.selected);
  }


  render() {
    return (
      <div className="shows-list">

      <table className="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Location</th>
      <th scope="col">Date</th>
      <th scope="col">Time</th>
    </tr>
  </thead>
  <tbody>
    {this.props.shows.map( function(show, i) { …