Блог

Привет, я новичок в react, и теперь я начинаю изучать базовую концепцию полного стека.

Я хочу, чтобы, когда пользователь нажимал кнопку «Редактировать», данные во вводимом тексте все еще оставались в текстовом поле до того, как пользователь нажмет «Редактировать».

но я столкнулся с этой ошибкой

Предупреждение: компонент изменяет контролируемый ввод текста типа на неконтролируемый. Элементы ввода не должны переключаться с управляемого на неконтролируемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента.

как я могу решить эту проблему?

заранее благодарю вас!

 import React, { Component } from "react";
import axios from "axios";

class Edit extends Component {
    constructor(props){
        super (props);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangePosition = this.onChangePosition.bind(this);
        this.onChangePhone = this.onChangePhone.bind(this);
        this.onChangePasscode = this.onChangePasscode.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            name:"",
            position: "",
            phone:"",
            passcode: ""
        }
    }
    componentDidMount() {
        axios.get('http://localhost:8888/reactJsCRUD/getById.php?id=' this.props.match.params.id)
         .then(response => {
            this.setState({
                name:response.data.employeeName,
                postition:response.data.employeePosition,
                phone: response.data.employeePhone,
                passcode:response.data.passcode
            });
         })
         .catch(function(error) {
             console.log(error);
         })
    }

    onChangeName(e) {
        this.setState({
            name: e.target.value
        });
    }

    onChangePosition(e) {
        this.setState({
            position: e.target.value
        });
    }

    onChangePhone(e) {
        this.setState({
            phone:e.target.value
        });
    }

    onChangePasscode(e) {
        this.setState({
            passcode: e.target.value
        });
    }
    onSubmit(e) {
        
    } 



    render() {
        return (
          <div style={{ marginTop: 10 }} className="w-50 p-3">
            <h3> Add New Employee</h3>
            <form onSubmit={this.onSubmit}>
              <div className="form-group-3">
                <label>Name: </label>
                <input type="text" className="form-control"  value={this.state.name} onChange={this.onChangeName} />
              </div>
              <div className="form-group">
                <label htmlFor= "positionFormSelect">Position: </label>
                <select className="form-control" id="positionFormSelect" value={this.state.position} onChange={this.onChangePosition}>
                  <option>Select the position</option>
                  <option value= "manager">Manager</option>
                  <option value= "server">Server</option>
                  <option value= "cook">Cook</option>
                </select>
              </div>
              <div className="form-group">
                <label>Phone: </label>
                <input type="text" className="form-control" value={this.state.phone} onChange = {this.onChangePhone}/>
              </div>
              <div className="form-group">
                <label>Passcode: </label>
                <input type="text" className="form-control" value= {this.state.passcode}onChange = {this.onChangePasscode}/>
              </div>
              <div className="form-group">
                <input
                  type="submit"
                  value="Edit Employee"
                  className="btn btn-primary"
                />
              </div>
            </form>
          </div>
        );
      }
}
 
export default Edit;
  

Я думаю, что у вас здесь опечатка:

  <input type="text" className="form-control" value={this.state.posscode} onChange={this.onChangePasscode}/>
  

значение должно быть this.state.passcode

В вашем коде вы устанавливаете состояние в componentDidMount, и именно поэтому он показывает вам предупреждение.

Поскольку вы используете это состояние для контролируемого компонента, и если это состояние обновляется извне обработчика событий, оно всегда будет отображать предупреждение как предупреждение о том, что ваше состояние, которое, по-видимому, используется для контролируемого компонента, теперь обновляется за пределами контролируемого компонента. Поэтому совет заключается в том, что если вы хотите использовать состояние для контролируемого компонента, то убедитесь, что конкретное состояние не обновляется откуда-либо еще.

Вот почему он выдает вам предупреждение о неконтролируемом компоненте, потому что ваше состояние сейчас не контролируется, поскольку оно обновляется за пределами области контролируемого компонента.

Эй, ребята, у меня есть решение. Проблема была в файле PHP!

 <?php
require_once "cors.php";
require_once "connect.php";

cors();
$con = connect();

$id = $_GET['id'];

// Get by id
$sql = "SELECT * FROM employee WHERE employeeId = {$id} LIMIT 1";

$result = mysqli_query($con,$sql);
$row = mysqli_fetch_assoc($result);
print_r($row) 
echo $json = json_encode($row);

exit;
  

из-за print_r($row) полученные данные также содержали массив, и поэтому я не смог получить доступ к ответу.данные правильно в React 🙂 спасибо вам всем!