Question

React 组件未获取默认状态

2021-10-15

416

reactjs state

尝试学习 React/RoR，在这个简单的测试应用中，我有一个“searchapp”反应应用。它为语言单选框设置了默认值。

import React from 'react'
import ReactDOM from 'react-dom'

import axios from "axios";

import SearchForm from "./searchForm";

class SearchApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchStrings: [],
      subjectName: "",
      language: 'English',
      region: ""
    };
    this.getSearchStrings = this.getSearchStrings.bind(this);
  }
  componentDidMount() {
    this.getSearchStrings();
  }
  handleClickLang  = changeEvent => {
  this.setState({
    language: changeEvent.target.value
  });
};

  getSearchStrings() {
    axios
      .get("/api/v1/search_strings")
      .then(response => {
        const searchStrings = response.data;
        this.setState({searchStrings});
      })
      .catch(error => {
        console.log(error);
      });
  }
  render() {
    return (
    <>
    <SearchForm />
    </>
  );
  }
}

然后在 searchForm 组件中，我使用该状态来设置和切换两个单选按钮。

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.subjRef = React.createRef();
    //this.handleClickLang = this.handleClickLang.bind(this);
  }
  componentDidMount() {
    this.setState({
      language: 'English'
    });
  }
  handleSubmit(e) {
    e.preventDefault();
    window.alert("sometext");
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} className="my-3">
       <div className="form-row">
       <div className="form-group col-md-8">
       <p>Choose language</p>
       </div>
       <div className="form-row">
       <div className="form-check">
         <label>
           <input
             type="radio"
             name="react-tips"
             value="English"
             checked={this.state.language === 'English'}
             onChange={this.handleClickLang}
             className="form-check-input"
           />
           English
         </label>
       </div>
       <div className="form-check">
         <label>
           <input
             type="radio"
             name="react-tips"
             value="Russian"
             checked={this.state.language === 'Russian'}
             onChange={this.handleClickLang}
             className="form-check-input"
           />
           Russian
         </label>
       </div>

但是当我运行它时，我收到以下错误： Uncaught TypeError：无法读取 null 的属性（读取“语言”）

我认为这是错误，因为它找不到默认语言，但是我在 SearchApp 的构造函数中将语言初始化为“英语”。

这是我对 React 状态的理解不够吗？任何帮助都非常感谢。

Answer 1

在 componentDidMount 中，我感觉语言即将变为空，您可以尝试以下操作：

Trying to learn React/RoR and in this simple test app I have a 'searchapp' react app. That sets a default for the language radioboxes.

import React from 'react'
import ReactDOM from 'react-dom'

import axios from "axios";

import SearchForm from "./searchForm";

class SearchApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchStrings: [],
      subjectName: "",
      language: 'English',
      region: ""
    };
    this.getSearchStrings = this.getSearchStrings.bind(this);
  }
  componentDidMount() {
    this.getSearchStrings();
  }
  handleClickLang  = changeEvent => {
  this.setState({
    language: changeEvent.target.value
  });
};

  getSearchStrings() {
    axios
      .get("/api/v1/search_strings")
      .then(response => {
        const searchStrings = response.data;
        this.setState({searchStrings,language: 'English'});
      })
      .catch(error => {
        console.log(error);
      });
  }
  render() {
    return (
    <>
    <SearchForm language={this.state.language}/>
    </>
  );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在 SearchForm 组件中通过 props 传递语言

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.subjRef = React.createRef();
    //this.handleClickLang = this.handleClickLang.bind(this);
  }
 
  handleSubmit(e) {
    e.preventDefault();
    window.alert("sometext");
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} className="my-3">
       <div className="form-row">
       <div className="form-group col-md-8">
       <p>Choose language</p>
       </div>
       <div className="form-row">
       <div className="form-check">
         <label>
           <input
             type="radio"
             name="react-tips"
             value="English"
             checked={this.props.language === 'English'}
             onChange={this.handleClickLang}
             className="form-check-input"
           />
           English
         </label>
       </div>
       <div className="form-check">
         <label>
           <input
             type="radio"
             name="react-tips"
             value="Russian"
             checked={this.props.language === 'Russian'}
             onChange={this.handleClickLang}
             className="form-check-input"
           />
           Russian
         </label>
       </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但还有几件事：

为什么在 searchForm 中也有语言状态，您可以在 Search 组件中拥有它并通过 props 传递它
您没有在 SearchForm 组件的构造函数中初始化任何状态

Answer 2

在此处添加后续内容以供将来参考。

正如@Thor84no 所建议的，问题在于没有添加 state = {}code> 来初始化子组件中的状态。