Question

我正在尝试将参数传递给组件，但在执行时遇到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未定义错误。我在这里错过了什么？

提前谢谢。

Answer 1

错误消息非常清楚 - 在渲染事件处理程序中未定义post。

目前你有两个事件处理程序，一个在你的渲染方法中定义的匿名函数（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更新。

ReactJS - 传递参数时“ReferenceError：post未定义”

1 个答案: