Решено: ReactJS: Uncaught TypeError: Невозможно прочитать свойство 'id' неопределенного значения при отправке на Laravel контроллер с использованием axios

Question

Я пытаюсь получить данные и отобразить их как динамическое c меню выбора / параметров с помощью ReactJs и отправить выбранное значение POST в контроллер Laravel, поэтому я не могу сохранить его.

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

export default class Sm extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            name: '',
            json:JSON.parse(props.data)
        };

        this.onChangeValue = this.onChangeValue.bind(this);
        this.onSubmitButton = this.onSubmitButton.bind(this);
    }

    onChangeValue(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    onSubmitButton(e) {
        e.preventDefault();

        axios.post('/Y', {
            name: this.state.json.id//error : Uncaught TypeError: Cannot read property 'id' of undefined
        })
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            // console.log(error);
            console.log(this.state.json.id);// error: Uncaught TypeError: Cannot read property 'id' of undefined
        });

        this.setState({
            name: ''
        })
    }

    componentDidMount () {
    }

    render()
    {
        return (
            <form onSubmit={this.onSubmitButton}>
                <select>
                    {this.state.json.map(i => (
                        <option className="form-control" name="name" value={i.id} onChange={this.onChangeValue}>{i.name}</option>//the id proprty is working :/
                    ))}
                </select>
                <button className="btn btn-success">Submit</button>
            </form>
        );
    }
}

if (document.getElementById('sm')) {
    var data = document.getElementById(('sm')).getAttribute('data');
    ReactDOM.render(<Sm data={data}/>, document.getElementById('sm'));
}

все работает нормально, но когда я публикую выбранное значение, я сталкиваюсь с этой ошибкой: Uncaught TypeError: невозможно прочитать свойство 'id', равное undefined, НО, с другой стороны, идентификатор свойства определен так как он функционирует, я вижу, что в <option className="form-control" name="name" value={i.id} onChange={this.onChangeValue}>{i.name}</option>

я даже пробовал this.state.json.i.id и все та же проблема.

-Update: Мой новый код:

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

export default class Sm extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            name: '',
            json:JSON.parse(props.data)
        };

        this.onChangeValue = this.onChangeValue.bind(this);
        this.onSubmitButton = this.onSubmitButton.bind(this);
    }

    onChangeValue(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    onSubmitButton(e) {
        e.preventDefault();

        axios.post('/Y', {
            name: this.state.name////500 (Internal Server Error)
        })
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            // console.log(error);
            console.log(this.state.name);//Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
            //console.log(this.state);//Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
            //console.log(this);//undefined
        });

        this.setState({
            name: ''
        })
    }

    componentDidMount () {
    }

    render()
    {
        return (
            <form onSubmit={this.onSubmitButton}>
                <select>
                    {this.state.json.map(i => (
                        <option className="form-control" name="name" value={i.id} onChange={this.onChangeValue}>{i.name}</option>//the id proprty is working :/
                    ))}
                </select>
                <button className="btn btn-success">Submit</button>
            </form>
        );
    }
}

if (document.getElementById('sm')) {
    var data = document.getElementById(('sm')).getAttribute('data');
    ReactDOM.render(<Sm data={data}/>, document.getElementById('sm'));
}

окончательная версия кода:

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

export default class Sm extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            json:JSON.parse(props.data),
            name: ''
        };

        this.onChangeValue = this.onChangeValue.bind(this);
        this.onSubmitButton = this.onSubmitButton.bind(this);
    }

    onChangeValue(e) {
        this.setState({
            // [e.target.name]: e.target.value
            name: e.target.value
        });
        console.log("Am i working ?");
    }

    async onSubmitButton(e) {
        e.preventDefault();

        try {
        const response = await axios.post('/Y', {name: this.state.name});
        console.log(response.data);
        } catch (error) {
          console.log(this.state.name);
        }

        this.setState(prevState => ({...prevState, name: ''}));
      }

    componentDidMount () {
    }

    render()
    {
        return (
            <form onSubmit={this.onSubmitButton}>
                <select onChange={this.onChangeValue} >
                    {this.state.json.map(i => (
                        <option className="form-control" name="name" value={i.id}>{i.name}</option>
                    ))}
                </select>
                <button className="btn btn-success">Submit</button>
            </form>
        );
    }
}

if (document.getElementById('sm')) {
    var data = document.getElementById(('sm')).getAttribute('data');
    ReactDOM.render(<Sm data={data}/>, document.getElementById('sm'));
}

Answer 1

Когда вы выбираете что-то, вы сохраняете идентификатор в state.name, поэтому выбранный идентификатор доступен здесь и должен работать.

i.id работает, потому что вы находитесь на карте . Вы не сможете выполнить json .id, поскольку json содержит несколько подобъектов.

Итак, ваш запрос ax ios должен выглядеть так:

axios.post('/Y', {name: this.state.name})
  .then(...)

[Edit] : вот ваш метод onSubmit как asyn c:

async onSubmitButton(e) {
  e.preventDefault();

  try {
    const response = await axios.post('/Y', {name: this.state.name});
    console.log(response.data);
  } catch (error) {
    console.log(this.state.name);
  }

  this.setState(prevState => ({...prevState, name: ''}));
}

Answer 2

Вы используете this.state. json .map , это означает this.state. json - это массив. Вот почему вы не можете использовать this.state. json .id , потому что id не существует. Если есть хотя бы 1 элемент, и вы хотите получить доступ к своему массиву, это будет this.state.json [0] .id для первого элемента.

В вашем случае вы хотите получить значение, которое вы установили в onChangeValue .

onChangeValue(e) {
  this.setState({
    [e.target.name]: e.target.value
  });
}

В зависимости от вашего кода вы можете получить выбранный идентификатор, используя this.state.name потому что это имя выбранного вами ввода (name = "name")