javascript - 在嵌套组件中更新状态的正确方法

Question

我在自学项目(reddit 克隆)中使用了几种不同的技术:

• react
• react 还原
• 终极版
• react 路由器(v4)

目标:单击帖子的编辑链接时，转到正确的路径并填充编辑表单字段。

我正在使用一个容器来分派(dispatch)一个 Action 并重新呈现更新容器 Prop 内的组件。它看起来像这样:

容器:

class PostContainer extends Component {
  componentDidMount() {  
    debugger;
    const {id} = this.props.match.params;
    this.props.dispatch(fetchPost(id));
  }
  render() {  
    return (

      <Post post={this.props.post} editing={this.props.location.state? this.props.location.state.editing : false}/>

    );
  }
}

const mapStateToProps = (state, ownProps) => {
  debugger;
  return {
    ...ownProps,
    post: state.post
  };
};

export default connect(mapStateToProps)(withRouter(PostContainer));

嵌套的 Post 组件有额外的嵌套组件:

POST 组件:

class Post extends Component {
  constructor(props) {
    super(props);
    this.editToggle = this.editToggle.bind(this);
  }
  state = {
    editing: this.props.location.state ? this.props.location.state.editing : false
  };

  editToggle() {
    this.setState({editing: !this.state.editing});
  }

  render() {
    const {editing} = this.state;
    if (editing || this.props.post === undefined) {    
      return <PostEditForm  editToggle={this.editToggle} editing={this.props.editing} post={this.props.post || {}}/>;
    }

    return (
      <div>
      <div>
       <h2>Title: {this.props.post.title}</h2>
       <span>Author: {this.props.post.author}</span>
       <br/>
       <span>Posted: {distanceInWordsToNow(this.props.post.timestamp)} ago f</span>

       <p>Body: {this.props.post.body}</p>
       <button type='button' className='btn btn-primary' onClick={() => this.editToggle()}>Make Edit</button>
     </div>
     <hr/>
     <Comments post={this.props.post}></Comments>

     </div>

    );
  }
}

export default withRouter(Post);

在render第一个函数if声明，我将更新的 Prop 传递给 <PostEditForm> .当 PostEditForm 收到 Prop 时，它会重新渲染组件，但组件的状态不会更新。

后编辑表单:

class PostEditForm extends Component {

  state = {
    timestamp: this.props.post.timestamp || Date.now(),
    editing: this.props.editing || false,
    body: this.props.post.body || '',
    title: this.props.post.title || '',
    category: this.props.post.category || '',
    author: this.props.post.author || '',
    id: this.props.post.id || uuid()

  };

  clearFormInfo = () => {
    this.setState({
      timestamp: Date.now(),
      body: '',
      title: '',
      category: '',
      author: '',
      id: uuid(),
      editing: false
    });
  };

  handleOnChange = (e) => {
    this.setState({[e.target.id]: e.target.value});
  };

  handleSubmit = event => {
    event.preventDefault();
    const post = {
      ...this.state
    };

    if(this.state.editing) {
      this.props.dispatch(updatePostAPI(post));
      this.setState({
        editing: false
      })
    } else {
      this.props.dispatch(createPostAPI(post));
      this.clearFormInfo();
      window.location.href = `/${post.category}/${post.id}`;
    }    
  };
  render() {

    const {editing} = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <h2>Create New Post</h2>
          <label htmlFor='text'>
            Title:
            <input
              type="text"
              onChange={this.handleOnChange}
              value={this.state.title}
              placeholder="Enter Title"
              required
              id="title"
              name="title"
            />
          </label>
          <label>
            Author:
            <input
              type="text"
              onChange={this.handleOnChange}
              value={this.state.author}
              placeholder="Enter Author"
              required
              id="author"
              name="author"
            />
          </label>
          <label>

          </label>
          <label>
            Body:
            <textarea
              type="text"
              onChange={this.handleOnChange}
              value={this.state.body}
              placeholder="Enter Body"
              required
              id="body"
              name="body"
            />
          </label>
        </div>
        <label>
        Category:

        <select id = 'category' onChange={this.handleOnChange} value={this.state.value} required>
          <option value='Select Category'>Select Category</option>
          <option value='react'>react</option>
          <option value='redux'>redux</option>
          <option value='udacity'>udacity</option>
        </select>

        </label>
      <button type='submit'>Create Post</button>
      </form>
    );
  }
}


export default connect()(PostEditForm);

我想我需要调用 setState并将传递给状态的新 props 赋值，但我不知道使用哪个 lifeCycle 方法。

当我使用 componentDidUpdate 时，类似于:

class PostEditForm extends Component {
  componentDidUpdate(prevProps) {

    if(this.props.post.id !== prevProps.post.id) {
      this.setState({
        timestamp: this.props.post.timestamp,
        editing: this.props.post.editing,
        title: this.props.post.title,
        category: this.props.post.category,
        author: this.props.post.author,
        id: this.props.post.id
      })
    }
  }
 .....

componentDidUpdate解决了最初的问题，但是每当我更新我正在编辑的表单中的内容时，都会调用 lifeclycle 方法，从而消除了对 onChange 处理程序的需要，这是一个好的做法还是我应该使用不同的方法？

Answer 1

只是一个笔记

componentDidUdpate 在每次重新渲染后调用，

componentDidMount 在组件实例化之后调用。

如果您在 componentDidUdpate() 钩子(Hook)中修改您的状态，您将陷入无限循环，因为 setState() 将重新触发 render() 以及 componentDidUpdate()

如果您在 componentDidMount() 中修改您的状态，此 Hook 只会在实例化后调用一次，而不是每次重新渲染时都会调用，因此后续更新将无法正常工作。

然而问题出在这里:

state = {
    timestamp: this.props.post.timestamp || Date.now(),
    editing: this.props.editing || false,
    body: this.props.post.body || '',
    title: this.props.post.title || '',
    category: this.props.post.category || '',
    author: this.props.post.author || '',
    id: this.props.post.id || uuid()

  };

render() {

    const {editing} = this.state;
    //change to const {editing} = this.props;
    ....
}

您声明状态的方式不适用于将来的更新，一旦实例化完成，状态将指向 Prop 的值，只是定义不可变的原始值。

你应该在整个 PostEditForm render() 方法中引用 this.props 而不是 this.state 你应该没问题。

要更新状态，您应该将回调从父级(在本例中为 Post 组件)传递给 PostEditForm 并在需要时触发它。

关于默认值，我建议使用 Proptypes 库。

类似于:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
class PostEditForm extends Component {
   //your business logic
}

PostEditForm.propTypes = {
  timestamp: Proptypes.Object,
  editing: PropTypes.bool,
  body: PropTypes.string,
  title: PropTypes.string,
  category: PropTypes.string,
  author: PropTypes.string,
  id: PropTypes.string
}
PostEditForm.defaultProps = {
 timestamp: Date.now(),
 editing: false,
 body: '',
 title: '',
 category: '',
 author: '',
 id: uuid()
}