时间戳

首页 > 解决方案 > ReactJS - 传递参数时出现“ReferenceError：未定义帖子”

javascript - ReactJS - 传递参数时出现“ReferenceError：未定义帖子”

问题描述

我正在尝试将参数传递给组件，但Uncaught (in promise) ReferenceError: post is not defined在执行此操作时出现错误 - 这是关键行：

<NewPost onAddPost={(e) => this.addPost(post, e)}/>

我也试过这个版本，

<NewPost onAddPost={this.addPost(post)}/>

但有相同的错误消息（但现在，整个页面根本不呈现）。

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: [],
      loading: true
    };
  }

    componentDidMount() {
        axios.get('/posts')
            .then(response => {
            this.setState({ posts: response.data, loading: false });
          });
    }

    addPost(post){
        console.log('in "addPost"');

        const oldPosts = this.state.posts;
        this.setState({posts: oldPosts.push(post)})
    }

  render() {
    return (
      <div>
        <NewPost onAddPost={(e) => this.addPost(post, e)}/>
        <Posts posts={this.state.posts} loading={this.state.loading} />
      </div>
    )
  }
}

export default App




class NewPost extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            namee: '',  
            description: '' 
        }

        this.handleChangeNamee = this.handleChangeNamee.bind(this);
        this.handleChangeDescr = this.handleChangeDescr.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);   
    }

    handleChangeNamee(event) {      
      this.setState({
        namee: event.target.value
      });
    }
    handleChangeDescr(event) {      
      this.setState({
        description: event.target.value
      });
    }

    handleSubmit(event) {
      event.preventDefault();

      const form_data = {
      namee: this.state.namee,
      description: this.state.description
    };

    axios.post('/posts/testtt', { form_data })
      .then(res => {
        this.props.onAddPost(res.data);                  
      })
    }

  render () {
    return (
      <div style={{'marginBottom': '20px'}}>
        <form onSubmit={this.handleSubmit}>
          <input name='namee' value={this.state.namee} onChange={this.handleChangeNamee}  />
          <input name='description' value={this.state.description} onChange={this.handleChangeDescr}  />
          <button onClick={this.handleItem}>Submit</button>
        </form>
      </div>
    );
  } 
}
export default NewPost

我尝试了传递参数的不同变体，调用该函数的不同方式，但它仍然导致post is not defined错误。我在这里还缺少什么？

先感谢您。

标签： javascriptreactjs

解决方案

错误消息非常清楚 - 您的渲染事件处理程序中没有定义帖子。

目前，您有两个事件处理程序，一个在您的渲染方法中定义的匿名函数（onAddPost={(e) => this.addPost(post, e)}- post 在这里没有定义，只有 e！）和另一个在您的类定义中 - addPost(post) { ... }.

我认为你的意思是做这样的事情：

<NewPost onAddPost={this.addPost} />

并将您的事件处理程序绑定到您的组件，如下所示：

addPost = (post) => {
    console.log('in "addPost"');

    const oldPosts = this.state.posts;
    this.setState({posts: oldPosts.push(post)})
}

编辑：此外，您应该避免像在这一行中所做的那样直接改变组件状态this.setState({posts: oldPosts.push(post)})：相反，您应该像这样创建一个新的数组实例this.setState({ posts: [...oldPosts, push] })：React 组件状态应始终被视为不可变的 - 仅由 setState 更新。

推荐阅读