标签: use-state

我正在学习 React（带钩子），想问一下我们进行的每个 API 调用是否都必须在 useEffect 钩子内？

在我的测试应用程序中，我有一个如下的工作模式：我设置状态，然后单击按钮后，我运行一个函数，向我的 API 发送 get 请求，并在 .then 块中将接收到的数据附加到状态。

我还有一个 useEffect 挂钩，仅在所述状态发生变化时运行（使用带有状态值的依赖数组），并且它使用前一个状态中的新数据设置另一个状态。第二个状态是我的应用程序在渲染块中渲染的状态。

这样，我的数据获取实际上发生在单击按钮时运行的函数中，而不是在 useEffect 本身中。似乎正在发挥作用。

这是一个有效的模式吗？提前致谢！

编辑：例如，这是单击按钮时运行的函数

const addClock = timezone => {
    let duplicate = false;
    selectedTimezones.forEach(item => {
      if (item.timezone === timezone) {
        alert("Timezone already selected");
        duplicate = true;
        return;
      }
    });
    if (duplicate) {
      return;
    }
    let currentURL = `http://worldtimeapi.org/api/timezone/${timezone}`;
    fetch(currentURL)
      .then(blob=>blob.json())
      .then(data => {
        setSelectedTimezones(prevState => [...prevState, data]);
      }
        );
  }

React.js 站点在此页面上有以下代码：

const [count, setCount] = useState(0);
...
<button onClick={() => setCount(count + 1)}>

但是由于 count 是根据之前的值更新的，所以第二行不应该是

<button onClick={() => setCount(prevCount => prevCount + 1)}>

我有一个 FlatList，我试图每隔 X 秒滚动浏览数据数组的每个索引。现在我的数组中只有两项，但可能会有更多。当前的代码适用于前两次迭代，但随后它似乎没有正确重置，我得到了scrollToIndex out of range error: index is 2 but maximum is 1. 我认为当currentIndexis时>= data.length我的if语句会setCurrentIndex回到 0 但它似乎不起作用。基本上我想做的是自动循环 Flatlist 中的项目，但每个项目都会暂停几秒钟。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import 'react-native-gesture-handler';
import React,  {useState, useEffect, useRef} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  ImageBackground,
  Image,
  TextInput,
  Button, …

我正在尝试从表单中获取数据，其中某些字段是动态的，因此它们的名称遵循以 1 或 2 结尾的星期几的模式。

在中onChange，我发送正在编辑的组件的名称，以便程序知道正在编辑什么输入，但是当我使用通过参数发送的名称时，它useState不会将其检测为变量，而是将其检测为普通字符串。

const [horas, setHoras] = useState({});  

const handleHoras = (e: any, nomb: string) => {
        setHoras({
            ...horas,
            nomb: e.target.value
        })
    }

我尝试将状态声明为数组（如下所示），但变量不会覆盖自身，而是在每次值更改时添加具有相同名称的变量。

    const handleHoras = (e: any, nomb: any) => {
        setHoras(
            [
                ...horas,
                { 'name': nomb, 'value': e.target.value }
            ]
        )
    }

不应直接改变 React 状态。但是，如果状态是一个类的实例，它应该是可变的，它有自己的方法。除了必须深度克隆并使用新参数重新实例化对象之外，还有其他方法吗？

一般而言：在父组件中创建的类对象在子组件中使用，同时在父状态（通过道具/上下文传递）保持其属性的反应方式是什么？

示例类

class Car{
    constructor(data){
        this.data = data
    }
    changeColor = (newcolor) => this.data.color = newcolor
}

示例父组件

const App = ({data}) => {
 const [car, setCar] = useState(new Car(data))
  return (
    <div>
      <CarViewer car={car} />
    </div>
  );
};

示例子组件

const CarViewer = ({car}) => {
  return (
    <div>
      The color is: {car.data.color}
    <button onClick={()=>car.changeColor("blue")}>Change color to blue </button>
    </div>
  );
};

在询问之前我进行了很多搜索，但似乎找不到适合我的解决方案。

我有一个函数需要在状态设置为新值后调用。

const onClickCallback = () => {
    setState(..., setCallback())
}

const setCallback = () => {
    console.log(State) // this prints the old State value
    if(State === something){
        ....
    }
}

尽管该函数被作为 setState 回调调用，但它仍然获取旧值。

我不确定问题是出在我这边还是根本不可能..

这是所有新反应开发人员中的一个流行问题，但不知何故我无法理解可用解决方案背后的逻辑。我正在尝试使用钩子更新状态变量并尝试读取更新后的值，但它总是返回先前的值而不是新值。下面是我的代码执行顺序。

onClick={setTransactionAccountId}

单击按钮时，它会执行以下代码并更新状态，但会console.log显示旧值。

const [accountId, setAccountId] = useState(0);

const setTransactionAccountId = e => {
  console.log("Clicked ID:", e.currentTarget.value);
  setAccountId(e.currentTarget.value);
  console.log("accountId:", accountId);
};

控制台日志：

1. 点击第一个按钮：

单击的 ID：0 帐户 ID：0

2. 第二个按钮点击：

单击的 ID：1 accountId：0

谁能告诉我这种行为背后的原因以及如何解决它。

我正在尝试更新我的“state”数组并使用“setState”将 String 类型的项目插入其中，但它不起作用。
我知道这不适用于push()。
我还尝试使用扩展运算符更新我的“状态”数组，但它也不起作用。
这是我的代码：

import React, { useState } from 'react';
import _, { debounce } from 'lodash';


export default function Search() {

  const [state, setState] = useState([])

  const handleChange = debounce(async (value) => {
    const url = `http://localhost:3100/`
    if (value == '') {
      return
    }
    let response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify({ value })
    })

    let test = await response.json()
    console.log(test)

    setState(state.concat(test))
    // setState([...state, test]) it also doesn't work …

我试图根据输入中是否有文本来启用或禁用按钮，但似乎无法实现。当我在按钮功能的禁用属性中手动设置 {true OR false} 时，它工作正常，但我对如何根据输入的内容动态设置它感到非常困惑。

非常欢迎任何指导！

这是我的应用程序代码

import { useState } from "react";

function Input (props){
    const { onChange, value } = props
    return (<input value={value} onChange={onChange} type="text" placeholder="Add a ToDo" maxLength="50"/>)
}

function Button (props) {
    const {onChange, state, text} = props
    return (<button disabled={false} onChange={onChange}>{text}</button>)
}

function App() {
  const [text, setText] = useState("");
  const [state, setSate] = useState(true);

  const handleChange = (event) => {
    if (!setText(event.target.value)) {
      setSate(false);
    } else {
      setSate(true);
    }
  };

  return (
    <div …

我正在尝试使用 React 更新对象数组中的单个键值对。

这是设置

对象数组

const array = [
  {id:1,name:'Tyler',age:23},
  {id:2,name:'Lauren',age:28},
  {id:3,name:'Nico',age:14},
]

给定 id 和年龄，我希望能够更新与 id 匹配的单个对象。例如，给定 id 2 和年龄 56，{id:2,name:'Lauren',age:28}应更改为{id:2,name:'Lauren',age:56}

我的方法

我已经设置 useState 来复制对象数组。但是，我正在努力筛选出选定的 id、更改年龄并返回更新后的数组。

这就是我目前所拥有的：

import { useState } from "react";

const array = [
  { id: 1, name: "Tyler", age: 23 },
  { id: 2, name: "Lauren", age: 28 },
  { id: 3, name: "Nico", age: 14 }
];

export default function App() {
  const [list, setList] = useState(array);

  const updateAge = (id …