访问USESESTATE变量内部用途

Question

我是node node.js的新手，我遇到了一些麻烦，理解它的逻辑。我创建了一个带有几个选择元素的页面。每个选择的选项都从服务器上加载Axios。然后，用户选择选项，然后按“保存”按钮，通过Axios Post请求发送到服务器来保存它们。代码为：

  export default function AddVault(props) {

  const [inputs, setInputs] = useState({
    wallet: "",
    blockchain: "",
    platform: "",
  });

  const [blockchains, setBlockchains] = useState([]);
  const [platforms, setPlatforms] = useState([]);

  // change state when user choose option in SELECT element
  function InputChange(evt) {
    const value = evt.target.value;

    setInputs({
      ...inputs,
      [evt.target.name]: value,
    });
  }

  useEffect(() => {
    const getBP = async () => {
      const blockchains = await Axios.get(
        process.env.REACT_APP_SRV + "/api/blockchains"
      );
      // the options for Blockchain SELECT
      setBlockchains(blockchains.data);
      setInputs({
        ...inputs,
        blockchain: blockchains.data[0].blockchain,
      });
      console.log("i1=", inputs);

      const platforms = await Axios.get(
        process.env.REACT_APP_SRV +
          "/api/platforms?blockchain=" +
          inputs.blockchain
      );
      // the options for Platform SELECT
      setPlatforms(platforms.data.response);
      setInputs({
        ...inputs,
        platform: platforms.data.response[0].title,
      });
      console.log("i2=", inputs);
    };

    getBP();

    console.log("i3=", inputs);
  }, []);

Axios请求正常工作，setBlockchains和setPlatforms正在设置适当的状态，但是问题是所有控制台日志输出初始“输入”变量，即

i3= {wallet: '', blockchain: '', platform: ''}
i1= {wallet: '', blockchain: '', platform: ''}
i2= {wallet: '', blockchain: '', platform: ''}

，当我带有默认加载值的AXIOS时，我已有 以下“输入”变量

save: inputs = {wallet: '', blockchain: '', platform: 'Autofarm'}

未设置 IE。似乎使用effect中的每个setInputs都使用默认（初始）状态获取输入变量。

在我看来，我正在使用本地“输入”状态变量内部使用效果函数，而不是全局“输入”状态变量。正确吗？如果是，那么如何访问全局状态变量内部使用效果？如果否，那么为什么未设置blockchain？

最好的问候，亚历克斯。

Answer 1

在您的代码中，您正在将更改应用于状态之前调用console.log。

要真正查看对输入的更改，请执行此操作：

useEffect(() => {
  console.log(inputs);
}, [inputs])

Answer 2

在函数中获取bp（）时，当您调用时，

 // the options for Blockchain SELECT
  setBlockchains(blockchains.data);
  setInputs({
    ...inputs,
    blockchain: blockchains.data[0].blockchain,
  });
  console.log("i1=", inputs);

您期望更新值记录。但是，由于usestate在本质上是异步的，因此在进行过程中，它继续执行其他说明。因此，您的控制台.log给出初始值。
也是如此

   console.log("i2=", inputs);
and
   getBP();
   console.log("i3=", inputs);

，因为没有类似基于类的setState（）函数的回调；在钩子中，尝试使用使用效果来跟踪输入中的更改。

useEffect(()=>{
 console.log(inputs);
},[inputs])

这可能会有所帮助： https：// https://dev./dev.to> -usestate-hook-is-as-antchronous-1hia

Answer 3

在文档中找到了答案。 SetState函数是异步的。因此，我应该在一个命令中使用。然后在一个

setInputs ({
  ...inputs,
  blockchain: blockchains.data[0].blockchain,
  platform: platforms.data.response[0].title,
});

命令中使用

useEffect(() => {
  console.log(inputs);
}, [inputs])

。非常感谢他们俩。