相关疑难解决方法(0)

useState设置方法不能立即反映更改

我正在尝试学习钩子,而useState方法使我感到困惑。我正在将初始值分配给数组形式的状态。即使使用spread(...)或,useState中的set方法对我也不起作用without spread operator。我在另一台PC上制作了一个API,我正在调用它并提取要设置为状态的数据。

这是我的代码:

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const StateSelector = () => {
  const initialValue = [
    {
      category: "",
      photo: "",
      description: "",
      id: 0,
      name: "",
      rating: 0
    }
  ];

  const [movies, setMovies] = useState(initialValue);

  useEffect(() => {
    (async function() {
      try {
        //const response = await fetch(
        //`http://192.168.1.164:5000/movies/display`
        //);
        //const json = await response.json();
        //const result = json.data.result;
        const result = [
          {
            category: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks

46
推荐指数
9
解决办法
2万
查看次数

如何在React钩子上使用`setState`回调

React钩子介绍了useState用于设置组件状态的方法。但是我如何使用钩子来代替如下代码的回调:

setState(
  { name: "Michael" },
  () => console.log(this.state)
);
Run Code Online (Sandbox Code Playgroud)

我想在状态更新后做一些事情。

我知道我可以useEffect用来做其他事情,但是我必须检查状态以前的值,这需要一个位代码。我正在寻找可以与useState钩子一起使用的简单解决方案。

reactjs

10
推荐指数
8
解决办法
5910
查看次数

多个状态更新完成后才调用函数

逻辑:

我有一个转换单位的对话框。它有两个阶段供用户选择:要转换的单位和要转换的单位。dialogStage为了可维护性,我将此阶段保留为一个状态,因为将来我可能需要参考对话框所处的阶段以获取更多功能。现在它被用来根据点击的单位确定要采取的行动。

我还有一个状态,dialogUnits,它会导致组件在更新时重新呈现。它是一个 JSX 元素数组,它通过foundUnitsArray或更新convertToUnitsArray,具体取决于对话框所处的阶段。当前,状态dialogStagedialogUnits都在问题发生的同时更新。

在此处输入图片说明

问题:

选择convertTo单位时,displayConversionTo()仍然被调用,好像dialogStage仍然设置为“initial”而不是“concertTo”。一些调试导致混乱,为什么if (dialogStage == 'initial')true当我的状态设置为“的ConvertTo”

我相信我的问题是dialogStage状态在handleUnitClick()被调用时没有及时更新,因为它是异步的。所以我设置了一个新的useEffect,只在dialogStage更新时调用。

现在的问题是对话框在初始选择后没有显示“convertTo”单位。我相信现在是因为dialogUnits没有及时更新?我已经将我原来的问题从一个状态没有准备好到另一个状态没有准备好。

在继续调用这里的函数之前,我如何等到两个状态都更新(例如handleUnitClick()?)。

还是我误会了问题所在?

我刚开始反应,到目前为止,我只熟悉状态更新在准备好时自动重新渲染组件的做法,除非被覆盖。更新dialogUnits是在对话框中显示新单位,直到我尝试仅在dialogStage准备好时才更新它。现在感觉就像是一种非此即彼的情况(在等待状态更新方面)而且我很可能忽略了一些更明显的东西,因为它似乎不适合在这么多情况下监听状态更新ReactJs 是围绕已经通过重新渲染等提供的内容构建的。

组件代码:

function DialogConvert(props) {

    const units = props.pageUnits;

    const [dialogUnits, setDialogUnits] = useState([]);
    const [dialogStage, setDialogStage] = useState('initial');

    let foundUnitsArray = …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

6
推荐指数
1
解决办法
321
查看次数

标签 统计

reactjs ×3

javascript ×2

react-hooks ×1