Javascript React如何正确调用函数以响应

我正在使用React和MongoDB创建博客。我从MongoDB检索数据，下面是我的组件：

import React, { Component } from 'react';
import axios from 'axios';

export default class Post extends Component {

  constructor(props) {
      super(props);
      this.state = {
       posts: []
      };
  }

  truncateText = text => {
    return text.substring(0, 500) + "...";
   }

    allPosts = () => {
      return this.state.posts.map(function(astroPost, i){
        return <div class="post-container">
            <img className="post-info-container__image" src={astroPost.picture} alt=""/>
            <div className="post" posts={astroPost} key={i}>
             <div class="post-container__text">
             <h2>{astroPost.title}</h2>
             <p className="date">{astroPost.date}</p>
             <p className="post-info-container__text">{this.truncateText(astroPost.postContent)}</p>
             <button>Read more</button>
            </div>
           </div>
           </div>
             })
           }

     componentDidMount() {
      axios.get('http://localhost:4000/')
           .then(response => {
               this.setState({posts: response.data})
               console.log(response)
           })
           .catch(function(error) {
               console.log(error)
           })
       }

  render() {
      return (
        <div>
          { this.allPosts() } 
       </div>
      )
  }
}

我想截断我的帖子的文本，这样一篇帖子只显示500个符号。我通过这样做实现了这一点：

return this.state.posts.map(function(astroPost, i){
        return <div class="post-container">
            <img className="post-info-container__image" src={astroPost.picture} alt=""/>
            <div className="post" posts={astroPost} key={i}>
             <div class="post-container__text">
             <h2>{astroPost.title}</h2>
             <p className="date">{astroPost.date}</p>
             <p className="post-info-container__text">{astroPost.postContent.substring(0, 500) + "..."}</p>
             <button>Read more</button>
            </div>
           </div>
           </div>

但是我想用一个get函数对文本进行调用，所以我在一个名为truncateText的函数中保留了相同的逻辑，但是当我这样调用它时：

   return this.state.posts.map(function(astroPost, i){
        return <div class="post-container">
            <img className="post-info-container__image" src={astroPost.picture} alt=""/>
            <div className="post" posts={astroPost} key={i}>
             <div class="post-container__text">
             <h2>{astroPost.title}</h2>
             <p className="date">{astroPost.date}</p>
             <p className="post-info-container__text">{astroPost.postContent.truncateText()}</p>
             <button>Read more</button>
            </div>
           </div>
           </div>
             })
           }

truncateText = text => {
 return text.substring(0, 500) + "...";
}

<p className="post-info-container__text">{this.truncateText(astroPost.postContent)}</p>

它说TypeError:astroPost.postContent.truncateText不是一个函数

---

如何调用该函数并正确执行截断？

astroPost只是您正在迭代的数组中的元素

此外，如果在类中创建函数，则必须执行以下操作之一：或将函数绑定到this元素，或将函数创建为箭头函数。我推荐第二种选择。因此，对于您的案例，您将以以下内容结束：

   return this.state.posts.map(function(astroPost, i){
        return <div class="post-container">
            <img className="post-info-container__image" src={astroPost.picture} alt=""/>
            <div className="post" posts={astroPost} key={i}>
             <div class="post-container__text">
             <h2>{astroPost.title}</h2>
             <p className="date">{astroPost.date}</p>
             <p className="post-info-container__text">{astroPost.postContent.truncateText()}</p>
             <button>Read more</button>
            </div>
           </div>
           </div>
             })
           }

truncateText = text => {
 return text.substring(0, 500) + "...";
}

<p className="post-info-container__text">{this.truncateText(astroPost.postContent)}</p>

然后，在你的地图中，你可以这样称呼它：

   return this.state.posts.map(function(astroPost, i){
        return <div class="post-container">
            <img className="post-info-container__image" src={astroPost.picture} alt=""/>
            <div className="post" posts={astroPost} key={i}>
             <div class="post-container__text">
             <h2>{astroPost.title}</h2>
             <p className="date">{astroPost.date}</p>
             <p className="post-info-container__text">{astroPost.postContent.truncateText()}</p>
             <button>Read more</button>
            </div>
           </div>
           </div>
             })
           }

truncateText = text => {
 return text.substring(0, 500) + "...";
}

<p className="post-info-container__text">{this.truncateText(astroPost.postContent)}</p>

您尚未将truncatetext绑定到组件：。在构造函数中，可以使用this.truncatetext=this.truncatetext.bindthis：

---

你能试试吗：this.truncateTextastroPost.postContentit说truncateText是未定义的，它不适用于这个tooOh duh，你要么需要在构造函数中绑定这个函数，要么将它设为arrow函数。您可以添加this.truncateText=this.truncateText.bindthis；在构造函数中。或者您可以调用如下函数：{=>this.truncateTextastroPost.postContent}}我将我的函数更改为you suggestion，并以相同的方式调用它，现在我无法读取未定义的属性'truncateText'，因为allPosts也应该是一个箭头函数。将其更改为allPosts==>{…}@MahmaDeva，该错误表示allPosts中的“this”实例不知道truncateText。如果你让allPosts成为一个箭头函数，它必须工作。你能把新密码发给我吗？“你有什么地方弄错了。@MaximilianoPoggioYes我用更新的代码编辑了我的问题。