React：第二次点击时更新上下文答案

【问题标题】：React : Context update at the second clickReact：第二次点击时更新上下文
【发布时间】：2020-05-13 15:08:15
【问题描述】：

当我尝试更新上下文时，我的 react 脚本遇到了一个小问题。

我有一个按钮，当点击它时应该更新上下文，但它只在第二次点击时起作用：

这是我的组件的代码：

    import React, { useContext } from 'react'
    import axios from 'axios'
    import { MdDelete } from 'react-icons/md'
    import AppContext from '../../../../../../../context/AppContext'


    const DeleteAttribute = (props) => {
      const context = useContext(AppContext)

      const handleClick = () => {
          context.app.insertApiResponse('test')

          console.log(context.app.lastApiResponse)
      }

      return (
          <div className="item skr-flex row centered-v" onClick={ handleClick }>
              <MdDelete className="skr-icon delete mr-s"/>
              <span className="font-700">Supprimer</span>
          </div>
      )
    }
    export default DeleteAttribute

我也尝试使用Appcontext.Consumer，但出现了相同的结果。

我不明白为什么它只能在第二次单击按钮时起作用，如果有人能给我答案，这对我很有帮助。

提前致谢！

【问题讨论】：

标签： javascript reactjs axios react-context

【解决方案1】：

问题是您试图在 api 响应任何数据之前访问一个值。在第二次运行中，context.app.lastApiResponse 中的数据具有第一次运行的值。所以你需要做的是使用then()，这会等待数据然后执行里面的代码

不确定其他代码的具体外观，但您可以尝试以下方法：

const DeleteAttribute = (props) => {
  const context = useContext(AppContext)

  const handleClick = () => {
      context.app.insertApiResponse('test').then(() => {
    console.log(context.app.lastApiResponse)
  })   
}

【讨论】：