Javascript 在发出 http 请求时做出react ，禁用按钮

发布于06月26日

我正在与React一起实现一个表内按钮，该按钮运行http请求以决定是否禁用，例如:

<Table>
  <tbody>
    <tr>
      <td>something1</td>
      <td>something2</td>
      <td>something3</td>
      <Button onClick = {() => DoSomething()} disabled= 
      {Boolean(HTTPRequest(payload))}>
        Click me!
      </Button>
    </tr>
  </tbody>
</Table>

function HTTPRequest(payload) {
  const {loading, error, data} = axios.get(API)
  return data.length > 0
}

然而，我注意到这不起作用，因为函数是在收到实际结果之前完成的.我认为它与异步有关，所以我将其更改为:

async function HTTPRequest(payload) {
  const {loading, error, data} = await axios.get(API)
  return data.length > 0
}

但它仍然不起作用.如果您有任何建议，我们将不胜感激，谢谢！

推荐答案

我认为应该使用状态和效果.

const [bool, setBool] = useState(initialBoolStateWanted);
useEffect(()=>{
  (async()=>{
    let data = await axios.get(API)
    setBool(data.length > 0)
  })()
},[])

return(
  <Button onClick = {() => DoSomething()} disabled={bool}>
    Click me!
  </Button>
)

编辑:添加到注释的解决方案

如果你需要提出几个请求

const [bools, setBools] = useState([initialBoolStateWanted]);
useEffect(()=>{
  (async()=>{
    let datas = await Promise.all(
      //For each button give different props to the request
      bools.map((elem, index) => axios.get(API(index))
    )
    setBools(datas.map(elem => elem.length > 0))
  })()
},[])

return(
  <Button onClick = {() => DoSomething()} disabled={bool}>
    Click me!
  </Button>
)

如果您可以在返回数组的单个请求中执行此操作

const [bools, setBools] = useState([initialBoolStateWanted]);
useEffect(()=>{
    (async()=>{
      let datas = await axios.get(API)
      setBools(datas.map(elem => elem.length > 0))
    })()
},[])

return(
  <Button onClick = {() => DoSomething()} disabled={bool}>
    Click me!
  </Button>
)

或者制作一个处理自身状态的按钮组件