Javascript 已解决：ReactJS:Uncaught TypeError:使用axios发布到Laravel控制器时无法读取未定义的属性“id”

我正在尝试获取数据，并使用ReactJs将其显示为动态选择/选项菜单，然后将所选值发布到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'));
}

代码最终版本：

    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'));
}

您使用的是this.state.json.map，这意味着this.state.json是一个数组。这就是为什么不能使用this.state.json.id，因为id不存在。如果至少有1个元素，并且您希望访问数组，则第一个元素的名称为.state.json[0].id

在本例中，您希望获得在onChangeValue中设置的值

onChangeValuee{ 这是我的国家{ [e.target.name]：e.target.value }; }

---

根据您的代码，您可以使用this.state.name检索所选id，因为这是您的选择输入名称=name的名称。当您选择某项内容时，您将该id存储在state.name中，因此所选id在此处可用，并且应该可以工作

i、 id有效，因为您在地图中。您将无法执行json.id，因为json包含多个子对象

因此，您的axios请求应该如下所示：

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

[编辑]：这是您的onSubmit方法，它是异步的：

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: ''}));
}

---

道具数据中有什么？道具数据是我使用laravel控制器从数据库中获取的数据是的I.id工作只是因为它在地图中，我将this.state.json.id更改为this.state.name，现在我面临一个新的错误：app.js:66227在promise TypeError中未捕获：无法读取未定义的属性“state”，在尝试查看发生了什么时，我也发现了这个问题console.logthis.state.name//承诺类型错误中未捕获：无法读取未定义的//console.logthis.state的属性“state”//承诺类型错误中未捕获：无法读取未定义的//console.logthis的属性“state”//undefined@YassineGhz你能用你的新代码更新你的帖子吗？是的，当然@Quentin Grisel，非常感谢你的时间。我认为现在的问题是axios。post似乎有两个问题。1-您的POST请求无效。我不知道axios是如何工作的，但通常情况下，InternalServerError意味着您的后端有问题。2-http请求是异步的，所以应该使用async.await模式。否则，在请求完成之前，最后一个setState可能会删除state.name的值。我没有输入！我只有一个表格和一个直接表格，有一个，这应该是问题吗？因为你说了[[this.state.name，因为那是你的选择输入名称=名称]]，因为我有一个新问题：app.js:66227未捕获承诺类型错误：无法读取未定义的属性“state”。

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: ''}));
}