React 组件接收到错误的 prop 值

Question

我有一个模态组件和一个表单组件。Modal 是一个功能组件，而 Form 是一个类组件，因为那是我处理表单提交的地方。

Modal [父级] 将其所有 props 传递给 Form。Modal 的 props 对象中有三个值，两个字符串和一个数字。

字符串值符合预期，但数字（用作 ID）为 1，而不是预期的 10（在本例中）。这是一个问题，因为我试图将该值保存到状态中，但没有获得我期望的值。

奇怪的是，如果我console.log(this.props)在里面render()，props 对象会被打印两次；第一次数字值为 1，第二次为 10。这发生在组件的初始渲染时，状态没有发生任何更改。

为什么会发生这种情况以及如何获得我期望的实际值？

---

这是模态组件。

import React from 'react';
import Form from './Form';


const Modal = (props) => (
  <div className="modal fade" id="createWorkitem" tabIndex="-1" role="dialog" aria-labelledby="createWorkitemLabel" aria-hidden="true">
    <div className="modal-dialog" role="document">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title" id="createWorkitemLabel">
            {/* 10 */}
            Item #{ props.issueNumber }
          </h5>
          <button type="button" className="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div className="modal-body">
          {/* Form needs props to POST */}
          <Form
            {...props}
          />
        </div>
      </div>
    </div>
  </div>
);

export default Modal;

这是表单组件

import React, { Component } from 'react';
import axios from 'axios';
import config from '../../../../../config';
const { create_issue_url } = config.init();

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      issueNumber: '',
      title: '',
      price: '',
      duration: '',
      description: ''
    }

    this.handleChange = this.handleChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
    this.resetForm = this.resetForm.bind(this);
  }

  componentWillMount() {
    // this prints once with wrong value
    console.log(this.props);
  }

   componentDidMount() {
    // this prints once with wrong value
    console.log(this.props);
    // this prints once with right value inside props object
    console.log(this);
  }

  handleChange(e) {
    this.setState({[e.target.id]: e.target.value});
  }

  submitForm(e) {
    e.preventDefault();
    let endpoint = `${create_issue_url}/${this.props.repo}`;
    let msg = 'Are you sure you want to create this item?';
    // Make sure
    if(confirm(msg)) {
      axios.post(endpoint, this.state)
      .then(response => {
        console.log(response.data.workitem);
        // Clear form
        this.resetForm();
        // Show success alert
        document.getElementById('successAlert').style.display = '';
        // Hide it after 3 seconds
        setTimeout(function hideAlert(){
          document.getElementById('successAlert').style.display = 'none';
        }, 3000);
      })
      .catch(err => {
        console.log(err);
      });
    }
  }

  resetForm() {
    this.setState({
      title: '',
      price: '',
      duration: '',
      description: ''
    });
  }

  render() {
    let { title, price, duration, description } = this.state;
    // this prints twice
    {console.log(this.props.issueNumber)}
    return (
      <form onSubmit={this.submitForm}>
        <div id="successAlert" className="alert alert-success" role="alert"
          style={{display: 'none'}}
        >
          Item created.
        </div>
        <div className="form-row">
          <div className="form-group col-md-6">
            <label htmlFor="title">Title</label>
            <input onChange={this.handleChange} type="text" value={title} className="form-control" id="title" required/>
          </div>
          <div className="form-group col-md-3">
            <label htmlFor="price">Price</label>
            <input onChange={this.handleChange} type="number" value={price} className="form-control" id="price" required/>
          </div>
          <div className="form-group col-md-3">
            <label htmlFor="duration">Duration</label>
            <input onChange={this.handleChange} type="number" value={duration} className="form-control" id="duration"
              placeholder="days" required
            />
          </div>
        </div>
        <div className="form-group">
          <label htmlFor="description">Description</label>
          <textarea
            onChange={this.handleChange} 
            className="form-control"
            id="description"
            style={{overflow: 'auto', resize: 'none'}}
            value={description}
            required
          ></textarea>
        </div>
        {/* Using modal footer as form footer because it works */}
        <div className="modal-footer">
          <button type="submit" className="btn btn-primary">Submit</button>
          <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </form>
    ); 
  }

}

export default Form;

Answer 1

行为是正确的。加载时，您的模态组件接收的 props 为 1。后来它更改为 10。因此，一旦值更改为 10，您的组件就会更新。在初始安装期间，componentDidMount 将仅被调用一次。但是只要组件更新，即收到更新的 prop（在您的情况下为问题号 10），就会调用 componentDidUpdate 和 render。

所以 render 会被调用两次，最初使用 1 作为 prop 值，然后是 10。但是 componentDidMount 只会被调用一次（当 prop 值为 1 时）

现在是在 componentDidMount 中打印 console.log(this) 与 console.log(this.props) 的问题。第一种情况显示 issuesnumber 属性为 10，第二种情况显示为 1。我怀疑这是因为 chrome 开发人员工具正在使用实时更新来优化打印。当你打印时，this显然 prop 是 1，但是我觉得控制台正在实时更新该打印（因为该对象很快就用新的 props 更新了）

Console.log 仅显示打印对象的更新版本

正如这里所建议的，而不是console.log(this)尝试 console.log(JSON.parse(JSON.stringify(this))); 这应该打印 1

希望这能解决这个问题。