相关疑难解决方法(0)

我正在尝试throttle在功能组件中使用lodash中的方法，例如：

const App = () => {
  const [value, setValue] = useState(0)
  useEffect(throttle(() => console.log(value), 1000), [value])
  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

由于内部方法useEffect在每次渲染时都会重新声明，因此限制效果不起作用。

有没有人有一个简单的解决方案？

如果要限制useEffect仅在组件安装时运行，则可以添加useEffectwith的第二个参数[]。

useEffect(() => {
  // ...
}, []);

但是，如何使useEffect该组件仅在组件被更新（除了初始安装）的那一刻才运行？

我有一个场景，我需要检测组件的第一次渲染。我在这里构建了一个小例子。有人可以向我解释什么是正确的方法吗？

为什么大多数人建议使用 aref而不是普通状态。

https://codesandbox.io/s/condescending-burnell-0ex3x?file=/src/App.js

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

export default function App() {
  const firstRender = useDetectFirstRender();
  const [random, setRandom] = useState("123");
  useEffect(() => {
    if (firstRender) {
      console.log("first");
    } else {
      console.log("second");
    }
  }, [random]);
  return (
    <div className="App">
      <h1>Random Number is {random}</h1>
      <button onClick={() => setRandom(Math.random())}>Change Name</button>
    </div>
  );
}

//Approach 1
// export function useDetectFirstRender() {
//   const firstRender = useRef(true);

//   useEffect(() => {
//     firstRender.current = …

什么的等价物 componentDidMount,componentDidUpdate以及componentWillUnmount使用钩做出反应就像生命周期挂钩useEffect？

简而言之，如何在 React 18 中禁用严格模式？我正在使用 React 18 和 create-react-app。

我已经通过了React v16.7.0中引入的钩子。

https://reactjs.org/docs/hooks-intro.html

因此，我对钩子的理解是，我们可以在功能组件中使用状态，而无需在react中编写类组件。这真是一个了不起的功能。

但是我对在功能组件中使用钩子一无所知。

   import { useState } from 'react';

   function Example() {
   const [count, setCount] = useState(0);

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
   );
  }

如果使用钩子，如何在上述功能组件中使用生命周期方法？

根据官方 React 文档，componentDidMount在 hooks 中翻译为：

useEffect(() => {
 //code here 
},[])

所以假设我想在这个钩子中做一个 api 调用：

useEffect(() => {
 getActiveUser(); 
},[])

添加 eslint 规则后"react-hooks/exhaustive-deps"，这是一个 lint 错误。为了使其静音，我可以将getActiveUser函数放入数组中，一切正常。

但这是否与文档背道而驰？我的印象是数组检查道具更改。我还想指出 API 调用是在没有 prop/id 的情况下进行的，所以我可以理解必须做这样的事情的事实：

useEffect(() => {
 getActiveUser(someId); 
},[getActiveUser, someId])

那么这里发生了什么？加了Eslint规则，是不是Effect里面的数组不能再为空了？

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

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

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

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

我遇到两个挑战：

• 即使按照React准则，不鼓励派生状态，但某些边缘情况仍然需要它。
  就带有React Hook的功能组件而言，如果我确实需要派生状态，那么与React Hook等效的实现是什么？在类component中，将在每个父渲染器的componentWillReceiveProps中更新

参见下面的代码示例：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.count > 100 ? 100 : props.count,
    }

  }

  /*What is the equivalent implementation when React Hook is used here componentWillReceiveProps*/
  componentWillReceiveProps(nextProps) {
    if (nextProps.count !== this.props.count) {
      this.setState({
        count: nextProps.count > 100 ? 100 : nextProps.count
      });
    }
  }

  render() {
    return ( <
      div > {
        this.state.count
      } <
      /div>
    );
  }
}

export default App;

• 至于componentDidUpdate，当使用React …

我正在使用 componentDidUpdate 函数

componentDidUpdate(prevProps){
     if(prevProps.value !== this.props.users){ 
        ipcRenderer.send('userList:store',this.props.users);    
}

对此

const users = useSelector(state => state.reddit.users)

    useEffect(() => {
       console.log('users changed')
       console.log({users})
    }, [users]);

但当我启动应用程序时，我收到消息“用户已更改”。但用户状态根本没有改变

我正在尝试使用useEffect受控表单组件中的钩子在用户更改表单内容时通知父组件并返回表单内容的 DTO。这是我目前的尝试

const useFormInput = initialValue => {
  const [value, setValue] = useState(initialValue)

  const onChange = ({target}) => {
    console.log("onChange")
    setValue(target.value)
  }

  return { value, setValue, binding: { value, onChange }}
}
useFormInput.propTypes = {
  initialValue: PropTypes.any
}

const DummyForm = ({dummy, onChange}) => {

  const {value: foo, binding: fooBinding} = useFormInput(dummy.value)
  const {value: bar, binding: barBinding} = useFormInput(dummy.value)

  // This should run only after the initial render when user edits inputs
  useEffect(() => {
    console.log("onChange callback")
    onChange({foo, …