Question

抱歉，如果我要问的是真正愚蠢的问题，我是React的新手，可能还有一些非常基本的概念我仍然缺少。

有人可以向我解释如何根据另一个状态变量的值来更改状态变量吗？

这是我尝试过的方法，但无法使它起作用：

import React, { useState } from 'react';
import './App.css';

function App() {

  const [number, setNumber] = useState(0)
  const [id, setId] = useState(0)

  function handleSubmit() {
    setNumber(10)
    changeId()
  }

  function changeId() {
    setId(number)
  }

  return (
    <div>
      <button onClick={handleSubmit}>Change number</button>
      <h1>{number}</h1>
      <h1>{id}</h1>
    </div>
  );
}

export default App;

在此之前，我尝试了这种更直接的方法，但当然也失败了：

import React, { useState } from 'react';
import './App.css';

function App() {

  const [number, setNumber] = useState(0)
  const [id, setId] = useState(0)

  function handleSubmit() {
    setNumber(10)
    setId(number)
  }

  return (
    <div>
      <button onClick={handleSubmit}>Change number</button>
      <h1>{number}</h1>
      <h1>{id}</h1>
    </div>
  );
}

export default App;

Answer 1

以您的情况为例，如下所示

Field1   CR_P  
123      6

通过单击按钮将数字设置为10，然后功能App将从头开始执行，function App() { const [number, setNumber] = useState(0) const id = number function handleSubmit() { setNumber(10) } return ( <div> <button onClick={handleSubmit}>Change number</button> <h1>{number}</h1> <h1>{id}</h1> </div> ); }将获得新值

demo

但是，如果id的值发生变化时，如果要处理复杂的逻辑，则需要number钩子

useMemo

demo

React：如何基于另一个状态变量的值来更改状态变量？

1 个答案: