Question

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

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

字符串值是预期的，但是数字（用作id）是1，而不是预期的10（在这种情况下）。这是一个问题，因为我试图将该值保存到状态，并且没有得到我期望的值。

特别是，如果我在console.log(this.props)内render()，道具对象会被打印两次;第一次数值为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

行为是正确的。加载时，模态组件接收道具为1.然后将其更改为10.因此，一旦值更改为10，组件就会更新。在初始安装期间，componentDidMount只会被调用一次。但是每当组件更新时都会调用componentDidUpdate和render，即接收更新的prop（在你的情况下为issuenumber 10）。

因此，渲染最初将被调用两次，其中1为prop值，然后为10.但componentDidMount仅被调用一次（当prop值为1时）

现在在componentDidMount中打印console.log（this）vs console.log（this.props）的问题。第一个案例显示issuenumber prop是10，第二个案例显示为1.我怀疑这是因为chrome开发人员工具正在使用实时更新来优化打印。当你正在打印时this显然prop是1，但是我觉得控制台是实时更新那个打印（很快就会用新道具更新该对象）

Console.log showing only the updated version of the object printed

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

希望这能解决问题。

React Component收到错误的道具价值

1 个答案: