问题：

未捕获（promise中）类型错误：无法读取未定义的属性“公司”

司徒骞尧

2023-03-14

我想有一个无限滚动的项目列表，我正在使用这个包https://github.com/CassetteRocks/react-infinite-scroller但是在留档中没有提到抓取功能的样子。

在我的代码中，它是这样的：

this.state = {
  companies: [],
  page: 0,
  resetResult: false,
};

fetchCompanies(page){
  traineeship.getAll(page).then(response => {
    if (response.data) {
      this.setState({ companies: this.state.companies.concat(response.data._embedded.companies) });
    } else {
      console.log(response);
    }
  });
}

componentDidMount() {
  this.fetchCompanies(this.state.page);
}

<InfiniteScroll
  pageStart={0}
  loadMore={this.fetchCompanies}
  hasMore={true || false}
  loader={<div className="loader" key={0}>Loading ...</div>}
  useWindow={false}
>
  {
    this.state.companies.map((traineeship, key) => (
      <div id={"item"} key={key}>
        <div className={"companyInfo"}>
          <div className={"heading"}>
            <div id={"companyDiv"}>
              <p style={{
                fontSize: '18px',
                lineHeight: '18px'
              }}>{traineeship.name}</p>
            </div>
            {
              traineeship.video === null
                ? ''
                :
                <div id={"videoDiv"}>
                  <div className={"youtubeBox center"}>
                    <div id={"youtubeIcon"}>
                      <a className={"primaryColor"}
                        href={traineeship.mediaUrl}>
                        <span style={{ marginRight: '3px' }}><Image
                          src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png"
                          style={{
                            width: '24px',
                            height: '17px'
                          }} /></span>
                        <span> <p style={{
                          fontSize: '13px',
                          lineHeight: '18px',
                          margin: 0,
                          display: 'inline-block'
                        }}>Esittely</p></span>
                      </a>
                    </div>
                    <div id={"txtVideo"}>

                    </div>
                  </div>
                </div>
            }

          </div>
          <div className={"location"}>
            <div id={"locationIcon"}>
              <Image src="assets/img/icLocation.png" style={{ marginTop: '-7px' }} />
            </div>
            <div id={"address"}>
              <a href={"https://www.google.com/maps/search/?api=1&query=" + encodeURI("Fredrikinkatu 4, Helsinki")}>
                <p className={"primaryColor"}
                  style={{ fontSize: '13px' }}>{traineeship.city}(show in
                                                        map)</p>
              </a>
            </div>
          </div>
          <div className={"companyDescription"}>
            <p className={"secondaryColor"} style={{
              fontSize: '14px',
              lineHeight: '20px'
            }}>{traineeship.description}</p>
          </div>

          <div className={"companyContacts"} style={{ marginTop: '20px' }}>
            <p className={"contactInfo"}>URL: {traineeship.website}</p>
            <p className={"contactInfo"}>Email: {traineeship.email}</p>
            <p className={"contactInfo"}>Puh: {traineeship.phonenumber}</p>
            <p className={"contactInfo"}>Contact: {traineeship.contact}</p>
          </div>
        </div>
      </div>
    ))
  }
</InfiniteScroll>

完整消息错误：

未捕获（promise中）类型错误：无法读取评估时未定义的属性“companys”（traineships.component.js:71）

编辑：（我不再有错误，但loadmore似乎根本没有触发）

import React from 'react';
import {Route, Link} from 'react-router-dom';
import FourthView from '../fourthview/fourthview.component';
import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
import traineeship from './traineeship.api';
import Header from '../header/header.component';
import InfiniteScroll from 'react-infinite-scroller';

require('./traineeship.style.scss');

class Traineeship extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            companies: [],
            page: 0,
            resetResult: false,
        };
    }

    componentDidMount() {
        this.fetchCompanies(this.state.page);
    }

    fetchCompanies(page){
        traineeship.getAll(page).then(response => {
            if (response.data) {
                this.setState({companies: this.state.companies.concat(response.data._embedded.companies)});
            } else {
                console.log(response);
            }
        });
    }

    render() {
        return (
            <div className={"wrapperDiv"}>
                {JSON.stringify(this.props.rootState)}
                <div className={"flexDivCol"}>
                    <div id="header">
                        <Header/>
                    </div>
                    <div id="result">
                        <div className={"search"}>
                            <h2>Harjoittelupaikkoja</h2>
                            <p className={"secondaryColor"}>{this.state.companies.length} paikkaa löydetty</p>
                        </div>
                        <div className={"filters"}>
                            <h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
                                Hakukriteerit</h5>
                            <div className={"filter"}>Ravintola- ja cateringala</div>
                            <div className={"filter"}>Tarjoilija</div>
                            <div className={"filter"}>Kaikki</div>
                        </div>
                        <div className={"searchResults"}>
                            <h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
                                Hakutulokset</h5>

                            <InfiniteScroll
                                pageStart={0}
                                loadMore={() => this.fetchCompanies.bind(this)}
                                hasMore={true || false}
                                loader={<div className="loader" key={0}>Loading ...</div>}
                                useWindow={false}
                            >
                                {
                                    this.state.companies.map((traineeship, key) => (
                                        <div id={"item"} key={key}>
                                            <div className={"companyInfo"}>
                                                <div className={"heading"}>
                                                    <div id={"companyDiv"}>
                                                        <p style={{
                                                            fontSize: '18px',
                                                            lineHeight: '18px'
                                                        }}>{traineeship.name}</p>
                                                    </div>
                                                    {
                                                        traineeship.video === null
                                                            ? ''
                                                            :
                                                            <div id={"videoDiv"}>
                                                                <div className={"youtubeBox center"}>
                                                                    <div id={"youtubeIcon"}>
                                                                        <a className={"primaryColor"}
                                                                           href={traineeship.mediaUrl}>
                                                                        <span style={{marginRight: '3px'}}><Image
                                                                            src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png"
                                                                            style={{
                                                                                width: '24px',
                                                                                height: '17px'
                                                                            }}/></span>
                                                                            <span> <p style={{
                                                                                fontSize: '13px',
                                                                                lineHeight: '18px',
                                                                                margin: 0,
                                                                                display: 'inline-block'
                                                                            }}>Esittely</p></span>
                                                                        </a>
                                                                    </div>
                                                                    <div id={"txtVideo"}>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                    }

                                                </div>
                                                <div className={"location"}>
                                                    <div id={"locationIcon"}>
                                                        <Image src="assets/img/icLocation.png" style={{marginTop: '-7px'}}/>
                                                    </div>
                                                    <div id={"address"}>
                                                        <a href={"https://www.google.com/maps/search/?api=1&query=" + encodeURI("Fredrikinkatu 4, Helsinki")}>
                                                            <p className={"primaryColor"}
                                                               style={{fontSize: '13px'}}>{traineeship.city}(show in
                                                                map)</p>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div className={"companyDescription"}>
                                                    <p className={"secondaryColor"} style={{
                                                        fontSize: '14px',
                                                        lineHeight: '20px'
                                                    }}>{traineeship.description}</p>
                                                </div>

                                                <div className={"companyContacts"} style={{marginTop: '20px'}}>
                                                    <p className={"contactInfo"}>URL: {traineeship.website}</p>
                                                    <p className={"contactInfo"}>Email: {traineeship.email}</p>
                                                    <p className={"contactInfo"}>Puh: {traineeship.phonenumber}</p>
                                                    <p className={"contactInfo"}>Contact: {traineeship.contact}</p>
                                                </div>
                                            </div>
                                        </div>
                                    ))
                                }
                            </InfiniteScroll>


                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Traineeship;

所以基本上它只显示前五篇文章，页面没有增加！

共有2个答案

仲孙景胜

2023-03-14

我不确定那件事。.bind（这个）。尝试将方法设为箭头函数（隐式绑定此上下文）：

constructor() {
   // ...
   this.fetchCompanies = this.fetchCompanies.bind(this);
}    

fetchCompanies(page) {
  return traineeship.getAll(page).then(response => {
    if (response.data) {
      this.setState({
        companies: this.state.companies.concat(
          response.data._embedded.companies
        )
      });
    } else {
      console.log(response);
    }
  });
}


// In your render's return:
<InfiniteScroll
  pageStart={0}
  loadMore={() => this.fetchCompanies(this.state.page)}
  hasMore={true || false}
  loader={
    <div className="loader" key={0}>
      Loading ...
    </div>
  }
  useWindow={false}
>;

彭烨烁

2023-03-14

@米兹卢：每次滚动都会调用FetchCompanys吗？你能检查一下吗？另外，您正在对此处的状态进行变异，即.state.companys.concat（response.data.\u embedded.companys）。。

你能更新到，

const companies = Array.from(this.state.companies);

this.setState({ companies: companies.concat(response.data._embedded.companies) });

类似资料：

未捕获类型错误：无法读取未定义的属性（读取'indexOf'）

我正在选择area_enninFantry的所有子div，并循环调整某些子div的文本。cardArray是一个全局常量，myId在父函数中定义。未捕获的TypeError:无法读取未定义的属性（读取“getAttribute”）我在这篇文章中读到，这可能是因为字段/元素的内容可能是DOM元素，我应该用$（）包装它们，所以我确实这样做了——将两个变量都更改为$（元素）[a]. attr（“标题
未捕获类型错误：无法读取未定义的属性（读取“嗜好”）

我遇到了一个有趣的问题，这使我感到困惑。我正在执行一个正确返回数据的Sharepoint RestAPI调用，当我在数据上运行for循环时，它生成html，但仍然抛出我用作标题的错误。代码如下。如果我记录每个循环，它将返回值。HTML也可以很好地工作。问题是错误仍然会出现。
未捕获（在promise中）类型错误：无法读取未定义的属性“字段”(React+Contentful）

我试图创建一个“投资组合”网站来学习反应。我已经从Contentul插入了内容，但是我得到了一个错误:的属性“fields”。 null 然后，我创建了2个自定义钩子来获取我的内容：我可以添加我的组件代码，如果需要，但我觉得我的错误来自这里…奇怪的是，如果我关闭错误，我会看到所有的项目都被正确地呈现（所以...它们被正确地从满足中拉出来），如果我点击它，我会得到正确的信息显示（标题，图像，等等）
未捕获（promise中）TypeError:无法读取未定义的属性（读取“then”）

我正在使用一个面向对象的图表，并根据滚动位置设置数据。我使用d3.csv（）加载then（）的数据，如下所示：对我来说，包含滚动库以及图表的所有代码是相当复杂的，所以我希望上面足够清楚。我的主要问题是调用在没有（）显示图形，但返回标题中的错误。我正在使用d3.v6，有人能帮忙吗？
React Router-未捕获类型错误：无法读取未定义的属性“getCurrentLocation”

我使用的是最新版本的react路由器（版本^3.0.0）。我使用ES5编写了以下路由：：在另一个名为
NVD3线图未捕获类型错误：无法读取未定义的属性x

我正在使用NVD3库根据Rails控制器中生成的数据制作简单的折线图。我用来在Rails中生成数据的代码是：然后，在我看来，我有以下JS代码：图表正确呈现，但当我尝试将鼠标悬停在数据点上以显示工具提示时，会出现错误“Uncaught TypeError:无法读取未定义的属性“x”

未捕获（promise中）类型错误：无法读取未定义的属性“公司”

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档