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

Posted 2023-04-14

【中文标题】React：第二次点击时更新上下文

【英文标题】：React : Context update at the second click

【发布时间】：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，但出现了相同的结果。

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

提前致谢！

【参考方案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)
  )