Question

我一直在绞尽脑汁，试图弄清楚为什么我无法使用this.props设置状态

import React, { Component } from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter, 
  Route,
  Switch,
  NavLink,
  withRouter
 } from "react-router-dom";
 import PropTypes from 'prop-types';
 import DatePicker from "./DatePicker.js";

class BasicEditInfoTag extends React.Component {
  constructor(props) {
  super(props);
  console.log(this.props);
  this.state = {
   tag: "",
   tagName: "",
  };
}

}
render(){
 <div className='tag_name_tag'>
  <label>Name of Tag</label>
  <i className="fas fa-tags"></i>
  <input type='text' name='name_tag' className='name_tag' ref={this.input} placeholder="Enter tag name" value={this.props.tagData.tag_name} onChange={this.handleInputChange.bind(this)} />
  {this.props.tagData.tag_name}

}

如您所见，第一个console.log返回空数组。但是一旦进入render方法，我的数据数组就可用了。我需要设置状态，以便为表单设置输入值。

Answer 1

在构造函数中不建议使用状态突变。这里不是发生状态突变的地方
不建议您更改状态tagName的方式。直接状态突变不会触发重新渲染，因此如果您进行直接突变，您将不会在屏幕上看到更新的数据

从构造函数和渲染中删除下面的代码行

   this.state.tagName = this.props.tagData.tag_name;

我可以看到唯一的问题是代码中Line上方，否则代码中的所有内容看起来都很好。删除后尝试一下，应该可以正常工作

更新：

  Remove that line of code wherever you used in your component

状态未定义的React Props（在构造函数内部）仅在render方法中可用

1 个答案: