React Failed тип проп: значение без обработчика onChange

Question

Это мой form компонент:

Form.jsx

import React, { Component } from 'react';
import axios from 'axios';
import { Redirect } from 'react-router-dom';

class Form extends Component {
  constructor (props) {
    super(props);
    this.state = {
      formData: {
        restaurant: '',
        username: '',
        email: '',
        password: ''
      }
    };
    this.handleUserFormSubmit = this.handleUserFormSubmit.bind(this);
    this.handleFormChange = this.handleFormChange.bind(this);
  };
  componentDidMount() {
    this.clearForm();
  };
  componentWillReceiveProps(nextProps) {
    if (this.props.formType !== nextProps.formType) {
      this.clearForm();
    };
  };
  clearForm() {
    this.setState({
      formData: {restaurant: '', username: '', email: '', password: ''}
    });
  };
  handleFormChange(event) {
    const obj = this.state.formData;
    obj[event.target.name] = event.target.value;
    this.setState(obj);
  };
  handleUserFormSubmit(event) {
    event.preventDefault();
    const formType = this.props.formType
    const data = {
      restaurant: this.state.formData.restaurant,
      email: this.state.formData.email,
      password: this.state.formData.password
    };
    if (formType === 'register') {
      data.username = this.state.formData.username
    };
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/auth/${formType}`;
    axios.post(url, data)
    .then((res) => {
      this.clearForm();
      this.props.loginUser(res.data.auth_token);
    })
    .catch((err) => { console.log(err); });
  };
  render() {
    if (this.props.isAuthenticated) {
      return <Redirect to='/' />;
    };
  return (
    <div>
      {this.props.formType === 'Login' &&
        <h1 className="title is-1">Log In</h1>
      }
      {this.props.formType === 'Register' &&
        <h1 className="title is-1">Register</h1>
      }
      <hr/><br/>
      <form onSubmit={(event) => this.handleUserFormSubmit(event)}>
       {this.props.formType === 'Register' &&
        <div className="field">
         <input
          name="restaurant"
          className="input is-medium"
          type="text"
          placeholder="Enter your restaurant name"
          required
          value={this.state.formData.restaurant}
          onChange={this.props.handleFormChange}
        /> 
        </div>
        }
          <div className="field">
            <input
              name="username"
              className="input is-medium"
              type="text"
              placeholder="Enter a username"
              required
              value={this.state.formData.username}
              onChange={this.props.handleFormChange}
            />
          </div>
        <div className="field">
          <input
            name="email"
            className="input is-medium"
            type="email"
            placeholder="Enter an email address"
            required
            value={this.state.formData.email}
            onChange={this.props.handleFormChange}
          />
        </div>
        <div className="field">
          <input
            name="password"
            className="input is-medium"
            type="password"
            placeholder="Enter a password"
            required
            value={this.state.formData.password}
            onChange={this.props.handleFormChange}
          />
        </div>
        <input
          type="submit"
          className="button is-primary is-medium is-fullwidth"
          value="Submit"
        />
      </form>
    </div>
    )
  };
};

export default Form;

а это мой app компонент:

App.jsx

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import axios from 'axios';

import UsersList from './components/UsersList';
import About from './components/About';
import NavBar from './components/NavBar';
import Form from './components/Form';
import Logout from './components/Logout';
import UserStatus from './components/UserStatus';


class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [],
      title: 'Test.io',
      isAuthenticated: false,
    };
    this.logoutUser = this.logoutUser.bind(this);
    this.loginUser = this.loginUser.bind(this);
  };
  componentWillMount() {
    if (window.localStorage.getItem('authToken')) {
      this.setState({ isAuthenticated: true });
    };
  };
  componentDidMount() {
    this.getUsers();
  };
  getUsers() {
    axios.get(`${process.env.REACT_APP_WEB_SERVICE_URL}/users`)
    .then((res) => { this.setState({ users: res.data.data.users }); })
    .catch((err) => { });
  };
  logoutUser() {
    window.localStorage.clear();
    this.setState({ isAuthenticated: false });
  };
  loginUser(token) {
    window.localStorage.setItem('authToken', token);
    this.setState({ isAuthenticated: true });
    this.getUsers();
  };
  render() {
    return (
      <div>
        <NavBar
          title={this.state.title}
          isAuthenticated={this.state.isAuthenticated}
        />
        <section className="section">
          <div className="container">
            <div className="columns">
              <div className="column is-half">
                <br/>
                <Switch>
                  <Route exact path='/' render={() => (
                    <UsersList
                      users={this.state.users}
                    />
                  )} />
                  <Route exact path='/about' component={About}/>
                  <Route exact path='/register' render={() => (
                    <Form
                      formType={'Register'}
                      isAuthenticated={this.state.isAuthenticated}
                      loginUser={this.loginUser}
                    />
                  )} />
                  <Route exact path='/login' render={() => (
                    <Form
                      formType={'Login'}
                      isAuthenticated={this.state.isAuthenticated}
                      loginUser={this.loginUser}
                    />
                  )} />
                  <Route exact path='/logout' render={() => (
                    <Logout
                      logoutUser={this.logoutUser}
                      isAuthenticated={this.state.isAuthenticated}
                    />
                  )} />
                  <Route exact path='/status' render={() => (
                    <UserStatus
                      isAuthenticated={this.state.isAuthenticated}
                    />
                  )} />
                </Switch>
              </div>
            </div>
          </div>
        </section>
      </div>
    )
  }
};

export default App;

Это сообщение об ошибке на консоли:

index.js:1446 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (at Form.jsx:72)
    in div (at Form.jsx:71)
    in form (at Form.jsx:69)
    in div (at Form.jsx:61)
    in Form (at App.jsx:66)
    in Route (at App.jsx:65)
    in Switch (at App.jsx:58)
    in div (at App.jsx:56)
    in div (at App.jsx:55)
    in div (at App.jsx:54)
    in section (at App.jsx:53)
    in div (at App.jsx:48)
    in App (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)

Хотя я не понимаю, потому что изменение формы обрабатывается в <input> в приведенном выше коде, например:

onChange={this.props.handleFormChange}

так чего мне не хватает? формы даже не принимают входные данные.

Answer 1

Вы неправильно поняли концепцию реквизита в компонентах React. Я попытаюсь объяснить это более упрощенной версией вашего приложения. Давайте возьмем пример формы.

class Form extends Component {

  handleFormChange(){
    console.log("This is the form change function inside -Form-");
  }

  render(){
    return(
    <div>
     <input
      name="email"
      type="text"
      value={this.state.email}
      onChange={this.handleFormChange} // Focus point 1 - Calls local function
    />
     <input
      name="username"
      type="text"
      value={this.state.username}
      onChange={this.props.handleFormChange} // Focus point 2 - Calls function passed down via props
    />  
   </div>

    );
  }


}


class App extends Component {

  handleFormChange(){
      console.log("This is the form change function inside -App-");
  }

  render(){
    return <Form handleFormChange={this.handleFormChange} />
  }

}

Как видите, приложение будет визуализировать компонент Form. Посмотрите на точки фокусировки 1 и 2. В первой точке фокусировки он пытается получить доступ к локальной функции handleFormChange. А второй пытается вызвать любую функцию, которая предоставляется родителем через реквизит.

Итак, вы сказали компоненту Form получить доступ к функции handleFormChange, которая должна была быть предоставлена ​​родителем как «prop», т.е. this.props.handleFormChange. Поэтому, когда компонент монтируется, React пытается привязать this.props.handleFormChange к событию onChange входных данных.

Но в вашем случае пропеллер 'handleFormChange' в компоненте не предусмотрен. следовательно this.props.handleFormChange будет неопределенным, что приведет к этому предупреждению.

Таким образом, чтобы подключить любые обработчики, которые находятся внутри компонента Form, они не должны быть связаны с 'this.props'. Любые обработчики, к которым обращаются через реквизиты, должны быть предоставлены родителем при инициализации компонента.

Answer 2

Это потому, что вы не передаете ни одного реквизита с именем handleFormChange из App.jsx компоненту Form.

Вместо этого он находится в вашем собственном Form компоненте.

Итак, просто попробуйте это onChange={this.handleFormChange}