标签: use-state

我使用 React 创建了新的自定义选择框。我在组件加载时加载了预先填充的数组（使用 useEffect）。当用户搜索任何不存在的国家/地区时，会有一个添加选项。于是我对 useState 着迷了。代码如下：-

const [countries, setCountries] = useState([]);

国家列表：-

[
  {"value": 1, "label": "Singapore"},
  {"value": 2, "label": "Malaysia"},
  {"value": 3, "label": "Indonesia"},
  {"value": 4, "label": "Phillipines"},
  {"value": 5, "label": "Thailand"},
  {"value": 6, "label": "India"},
  {"value": 7, "label": "Australia"},
  {"value": 8, "label": "Pakistan"}
]


const handleHTTPRequest = () => {
    service.getData() 
    .then(res => {
      setCountries(res);
    })
    .catch((err) => console.error(err))
  }

  useEffect(() => {
    handleHTTPRequest()
  })

我正在检查数组中搜索到的国家/地区，如果不存在，我只需添加到数组中

const addCountry = (country) => {
    let isRecordExist = countries.filter(c => c.label …

我有点困惑为什么这个组件不能按预期工作：

function Counter() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    const id = setInterval(() => {\n      setCount(count + 1); // This effect depends on the `count` state\n    }, 1000);\n    return () => clearInterval(id);\n  }, []); //  Bug: `count` is not specified as a dependency\n\n  return <h1>{count}</h1>;\n}\n

但重写如下：

function Counter() {\n  const [count, setCount] = useState(0);\n  let c = count;\n  useEffect(() => {\n    const id = setInterval(() => {\n      setCount(c++);\n    }, 1000);\n    return () => clearInterval(id);\n …

在此示例中，我只是useState使用初始化函数进行调用：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = useState(() => {
    console.log('Getting initial state...');

    return {};
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

从控制台可以看到，useState函数被调用了两次。这是正常现象，有什么原因吗？

我正在尝试创建一种费用管理器，但遇到一个问题，我提交的数字作为字符串而不是整数添加。我确保默认设置为整数而不是字符串。

“有问题的”部分是收入部分（我已突出显示）

应用程序：

import Outcome from "./components/Outcome";
import Income from "./components/Income";

const App = () => {
  const [sum, setSum] = useState(0);

  const onChangeHandlerOutcome = (value) => {
    setSum(sum - value);
  };

  const onChangeHandlerIncome = (value) => {
    setSum(sum + value);
  };

  return (
    <div>
      <Outcome onChangeHandlerOutcome={onChangeHandlerOutcome} />
      <Income onChangeHandlerIncome={onChangeHandlerIncome} />
      You have {sum}$!
    </div>
  );
};

export default App;

收入构成

const Income = (props) => {
  const [input, setInput] = useState(0);

  const setInputHandler = (e) => {
    e.preventDefault();
    setInput(e.target.value); …

我有以下状态：

const [clickColumn, setClickColumn] = useState({
    name: 0,
    tasks: 0,
    partner: 0,
    riskFactor: 0,
    legalForm: 0,
    foundationYear: 0
  })

现在，例如，我只想将 name 设置为 2，其余设置为 1。但我不想这样写：setClickColumn({ name: 2, tasks: 1, riskFactor: 1, partner: 1, legalForm: 1, foundationYear: 1 });

我怎样才能让它更短？

我正在尝试制作需要字母成绩和学分来计算 GPA 的 GPA 计算器。字母等级有助于找到分数，例如 A+ 表示 4.00 或 D 表示 1.00。

问题是，当我多次更改成绩值时，我会收到此错误，并且我的错误行始终处于 handlePoints()功能状态。确切的行是

const newPoints = [...points];
newPoints[i] = 4;
setPoints(...newPoints);

下面是我所有的代码

import React, { useEffect, useState } from "react";
import SgpaComponent from "./SgpaComponent";

function Sgpa() {
  const [subjects, setSubjects] = useState(["Subject Name"]);
  const [grades, setGrades] = useState(["A+"]);
  const [points, setPoints] = useState([4]);
  const [credits, setCredits] = useState([3]);
  const [sgpa, setSgpa] = useState();
  function handleAdd() {
    setSubjects((prev) => [...prev, "Subject Name"]);
    setGrades((prev) => [...prev, "A+"]);
    setPoints((prev) => [...prev, …

你好，我正在按照教程使用 React 创建一个 Web 应用程序。但在某些时候，当使用 useState 意味着将汉堡菜单图标更改为十字 onClick （反之亦然）时，我对 setClick 变量的使用不断出现“不是函数”错误，我不太确定为什么......

任何帮助，将不胜感激 ：）

import React,{ useState } from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
    const {click, setClick} = useState(false);

    const handleClick = () => setClick(!click);

    return (
        <>
            <nav className="navbar">
                <div className="navbar-container">
                    <Link to="/" className="navbar-logo">
                        SMLT <i class="fas fa-dice-d20"></i>
                    </Link>
                    <div className='menu-icon' onClick={handleClick}> 
                        <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
                    </div>
                </div>
            </nav>
        </>
    );
}

正在开发一个涉及 React Material-UI 表的教程 atm，该表也有一个搜索输入文本字段。我试图添加的是一个按钮，该按钮将重置表报告，但也会清除搜索输入文本字段。

我遇到问题的是清除搜索文本字段。

他们将此代码用作名为 Controls.input 的单独组件库：

从 'react' 导入 React 从 '@material-ui/core' 导入 { TextField };

export default function Input(props) {

    const { name, label, value,error=null, onChange, ...other } = props;
    return (
        <TextField
            variant="outlined"
            label={label}
            name={name}
            value={value}
            onChange={onChange}
            {...other}
            {...(error && {error:true,helperText:error})}
        />
    )
}

主要搜索代码如下，我还添加了一个按钮

            <Controls.Input
                id="name"
                label="Search Name"
                className={classes.searchInput}
                InputProps={{
                    startAdornment: (<InputAdornment position="start">
                        <Search />
                    </InputAdornment>)
                }}
                onChange={handleSearch}
            />
            <Button
                onClick={handleClear}
                className="materialBtn"
            >
                Clear
            </Button>

此时，我不确定如何引用/定位搜索输入字段作为函数的一部分handleClear，以便清除其内容？

const handleClear = () => { …

我试图了解哪种使用 useState 挂钩的方式是更好的做法。请考虑以下两个简单 React 组件的示例：

1. 多个 useState 挂钩

   const Cake = () => {
       const [topping, setTopping] = useState('');
       const [icing, setIcing] = useState('');
       const [fruit, setFruit] = useState('');
       const [base, setBase] = useState('');
       const [cake, setCake] = useState({topping: '', icing: '', fruit: '', base: ''});
   
       const createCake = () => {
           setCake({
               topping: topping,
               icing: icing,
               fruit: fruit,
               base: base
           });
           console.log(cake);
       }
   
       return (
           <div>
               <p>Choose from possible toppings:</p>
               <Select options={toppings} onChange={e => setTopping(e.target.value)} value={topping}/>
               <p>Choose from possible …

   Run Code Online (Sandbox Code Playgroud)

我有一个功能性的 React 组件，大致如下所示：

const MyComponent = (prop1) => {
  
  const [myState, setState] = useState(prop1)  

  return <>
    {myState && <div>Some text...</div>}
    <div onClick={() => setState(true)}>Click me</div>
  </>
}

这显然不起作用，因为 React 只计算一次初始状态部分，因此myState不会在prop1更改时更新。

有没有办法在不使用的情况下完成这项工作useReducer？这是一个很好的用例吗useEffect？