Javascript 为什么在将函数从一个组件导出到另一个组件时，React会抛出错误？

我有两个组件：post和Postform。Posts是一个组件，用于显示从数据库中获取的POST列表。Postform组件是一个创建新帖子然后更新帖子组件的表单。我在Posts中将函数addPost（）声明为全局函数，并将其绑定到Posts构造函数中。 然后从Posts导出addPost（）方法，并将其导入Postform组件，我希望从中使用导入的addPost（）方法更新Posts组件的状态

但是，我收到一个错误，指出这在Post组件的addPost（）内部无效 从另一个同级更新同级的过程取自此

我包括这两个组件的代码以供参考

这是Posts.js，即

import React, { Component } from 'react'

export function addPost(posts){
  this.setState({ posts });
}

export default class Posts extends Component {
 constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
   this.getPosts = this.getPosts.bind(this);
   addPost = addPost.bind(this);
  }

  getPosts(posts) {
    this.setState({ posts, })
    console.log(this.state);
  }


  componentWillMount() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(posts => this.getPosts(posts));

  }

  render() {
    const posts = this.state.posts;
    const postList = posts.map(post => {
      return (
        <div key={post.id}>
          <div>ID: {post.id}</div>
          <br />
          <div>{post.title}</div>
          <br />
          <div>{post.body}</div>
          <hr />
        </div>
      )
    })

    return (
      <div>
        <h1>Posts</h1>
        <hr />
        {postList}
      </div>
    )
  }
}

import React，{Component}来自“React”
导出功能addPost（posts）{
this.setState（{posts}）；
}
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
员额：[]
}
this.getPosts=this.getPosts.bind（this）；
addPost=addPost.bind（这个）；
}
获取帖子（帖子）{
this.setState（{posts，}）
console.log（this.state）；
}
组件willmount（）{
取（'https://jsonplaceholder.typicode.com/posts')
.then（res=>res.json（））
.then（posts=>this.getPosts（posts））；
}
render（）{
const posts=this.state.posts；
const postList=posts.map（post=>{
返回(
ID:{post.ID}


{post.title}


{post.body}

)
})
返回(
帖子

{postList}
)
}
}

这是Postform.js

import React, { Component } from 'react'

import  addPost  from './Posts.js';

export default class Postform extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '',
      body : '',
    }
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChange(event) {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }


  onSubmit(event) {
    const post = {
      title: this.state.title,
      body : this.state.body
    }
    //this is going to start a fetch process to post the new post to the database
    fetch('https://jsonplaceholder.typicode.com/posts',
      {
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify(post),
      })
      .then(res => res.json())
      .then(data => addPost({data}));

    event.preventDefault();

  }
  render() {
    return (
      <div>
        <h1>ADD POST</h1>   
        <form onSubmit={this.onSubmit}>
          <div>
            <label>Title</label>
            <input type="text" name="title" value={this.state.title} onChange={this.onChange} />
          </div>
          <div>
            <label>Body</label>
            <textarea name="body" onChange={this.onChange} value={this.state.body} />
          </div> 
          <br />
          <button type="submit">ADD</button>
        </form>
      </div>
    )
  }
}

import React，{Component}来自“React”
从“/Posts.js”导入addPost；
导出默认类Postform扩展组件{
建造师（道具）{
超级（道具）；
此.state={
标题：“”，
正文：“”，
}
this.onChange=this.onChange.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
}
onChange（事件）{
这是我的国家({
[event.target.name]：event.target.value，
})
}
提交（事件）{
常数桩={
标题：this.state.title，
身体：这个。状态。身体
}
//这将启动一个获取过程，以将新帖子发布到数据库
取（'https://jsonplaceholder.typicode.com/posts',
{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（post），
})
.then（res=>res.json（））
.then（data=>addPost（{data}））；
event.preventDefault（）；
}
render（）{
返回(
添加帖子
标题
身体


添加
)
}
}

问题在于这些行：

export function addPost(posts){
  this.setState({ posts });
}

---

这将不起作用，因为在

Post

类之外没有

This

的概念。您应该在父组件（

Postform

）中有一个函数，并以这种方式更新道具

你能添加错误吗？我提到了我在问题中提到的博客文章，在那里，通过在类外部创建函数并将其绑定到类的构造函数中，可以实现兄弟姐妹之间的通信。请放心，这是一种不正确的实现兄弟姐妹间通信的方法。这是链接