Javascript 从axios响应响应设置状态

我正在尝试使用axios POST调用返回的信息更新状态。我收到一个错误，提示

TypeError:无法读取未定义的

的属性“setState”。在我看来，这个在API响应中是不可用的

submitData= () => {
        axios.post("url", this.props.data)
        .then(function (result) {
            console.log(result,'success');
            this.setState({
                ...this.state,
                id: result.data.id
            })
          })
          .catch(function (err) {
            console.log(err, 'fail');
          });

    }

---

我可以控制台log

result.data.id

，它是正确的id。我在客户端执行此操作，我不想构建服务器或使用缩减器。

尝试将

制作成一个匿名函数来绑定
此

submitData= () => {
    axios.post("url", this.props.data)
    .then((result) => {
        console.log(result,'success');
        this.setState({
            ...this.state,
            id: result.data.id
        })
      })
      .catch((err) => {
        console.log(err, 'fail');
      });
}

尝试将
设置为匿名函数，以绑定
此

submitData= () => {
    axios.post("url", this.props.data)
    .then((result) => {
        console.log(result,'success');
        this.setState({
            ...this.state,
            id: result.data.id
        })
      })
      .catch((err) => {
        console.log(err, 'fail');
      });
}

在回调函数中使用箭头函数，如下所示：

submitData= () => {
        axios.post("url", this.props.data)
        .then((result) => {
            console.log(result,'success');
            this.setState({
                ...this.state,
                id: result.data.id
            })
          })
          .catch(function (err) {
            console.log(err, 'fail');
          });

    }

在回调函数中使用箭头函数，如下所示：

submitData= () => {
        axios.post("url", this.props.data)
        .then((result) => {
            console.log(result,'success');
            this.setState({
                ...this.state,
                id: result.data.id
            })
          })
          .catch(function (err) {
            console.log(err, 'fail');
          });

    }

在回调函数中，
这个
是未定义的（这就是js中的
这个
的工作原理）。
如果您想要一个简单的修复，只需使用箭头函数

submitData= () => {
        axios.post("url", this.props.data)
        .then(result => {
            console.log(result,'success');
            this.setState({
                ...this.state,
                id: result.data.id
            })
          })
          .catch(function (err) {
            console.log(err, 'fail');
          });
    }

在回调函数
中阅读有关
此
的更多信息
此
将是未定义的（js中的
此
就是这样工作的）。
如果您想要一个简单的修复，只需使用箭头函数

submitData= () => {
        axios.post("url", this.props.data)
        .then(result => {
            console.log(result,'success');
            this.setState({
                ...this.state,
                id: result.data.id
            })
          })
          .catch(function (err) {
            console.log(err, 'fail');
          });
    }

阅读有关此
的更多信息您还可以使用异步/等待语法并将数据作为参数传递，以提高灵活性/可重用性。尝试：

submitData = async (data) => {
    try {
        const result = await axios.post('url', data);
        console.log('Success', result);
        const { id } = result.data;
        this.setState({
            ...this.state,
            id,
        });
    } catch (err) {
        console.log('Failure', err);
    }
}

您还可以使用async/await语法并将数据作为参数传递，以提高灵活性/可重用性。尝试：

submitData = async (data) => {
    try {
        const result = await axios.post('url', data);
        console.log('Success', result);
        const { id } = result.data;
        this.setState({
            ...this.state,
            id,
        });
    } catch (err) {
        console.log('Failure', err);
    }
}