React 组件中的函数在不使用 useEffect 的情况下无法获取对象的最新状态

Question

以下代码无法获取父组件中对象的最新状态。谁能帮助我如何从子组件获取最新值并在不使用 useEffect 的情况下触发警报？

App.JSX 文件代码

import React, {useState}  from 'react';
import ChildComponent from './ChildComponent';
const App = (props) => {
  const [state, setState] = useState({ value: "" });

  const updateState = (newValue) => {
    setState({ value: newValue });
    state.value === '5' && alert('the value is 5');
  }

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ChildComponent updateState={updateState} />
    </div>
  );
}

export default App;

ChildComponent.jsx 文件代码

import React, {useState} from 'react';

const ChildComponent = (props) => {
  const handleChange = (event) => {
    props.updateState(event.target.value);
  }

  return (
    <input type="text" onChange={handleChange} />
  );
}

export default ChildComponent;

以下代码无法获取父组件中对象的最新状态。谁能帮助我如何获得最新的价值？

Answer 1

你应该只使用一个

useEffect

钩子。但是，如果您不想这样做，您可以尝试在

newValue

上调用警报，而不是像这样的

state

：

const updateState = (newValue) => {
  setState({ value: newValue });
  newValue === '5' && alert('the value is 5');
}