Question

为什么一个诺言会导致多次退换？

我的主要问题是Forward和Goalie函数都依赖于formation和starters。

我在这里使用一个Promise来模拟我的应用程序对后端服务进行api调用。

即

  const pickFormation = (formation) => {
    axios.get(`http://localhost:3000/games/${gameId}/starting-lineup/?formation=${formation}`, { headers:
      { Authorization: provider.token }
    })
      .then(res => {
        setStarters(res.data.starters)
        setFormation(formation)
      })
  }

这是下面的代码示例，用于重现我的问题。奇怪的是，如果我删除了诺言，那么更新这两种状态都会起作用。有了诺言，有没有一种方法可以在所有状态对象都更新后只渲染一次？

import * as React from "react";
import { useState } from "react";
import { render } from "react-dom";

const App = () => {

  const [formation, setFormation] = useState('4-4-2');
  const [starters, setStarters] = useState({goalie: {name:'anthony'}});


  const updateFormation = (f) => {
    var promise1 = Promise.resolve();

    promise1.then(function () {
      setFormation(f)
      setStarters({ forward: { name: 'john' } });
    });


    // setFormation(f) this works perfectly with no promise. 
    // setStarters({ forward: { name: 'john' } });

  }

  const players = () => {
    switch(formation) {
      case '4-3-3':
        debugger;
        return <Forward starters={starters} />
      default: 
        return <Goalie starters={starters} />
    }
  }
  return (
    <div>
      <p>{formation}</p>
      <button onClick={() => updateFormation('4-3-3')}> update</button>
      {players()}
    </div>
  )
}

const Forward = ({starters}) => {
  return (
    <div>
      <p>{starters.forward.name[0]}</p>
    </div>
  )
}
const Goalie = ({starters}) => {
  return (
    <div>
      <p>{starters.goalie.name}</p>
    </div>
  )
}

render(<App />, document.getElementById("root"));

如果我删除诺言，那就没有问题。如果诺言存在，我将收到“ TypeError：无法读取未定义的属性'名称'”。

在两个useState对象都更新之前，我可以防止重新提交吗？

0 个答案: