标签: use-effect

我想将其转换为useEffect钩子：

代码

componentDidMount () {
   this.messagesRef.on('child_added', snapshot => {
    const message = snapshot.val();
    message.key = snapshot.key;
    this.setState({messages: this.state.messages.concat(message 
  )});
});

更新代码

const MessageList = () => {
  const [messages, setMessage] = useState([]);
  const [usernames, setUsernames] = useState('');
  const [contents, setContents] = useState('');
  const [roomId, setRoomId] = useState('');

  const messagesRef = MessageList.props.firebase.database().ref('messages');

  useEffect(() => {
    messagesRef.on('child added', snapshot => {
    const message = snapshot.val();
    message.key = snapshot.key;

    const [messages, setMessages] = useState({messages: messages.concat(message)});
  });
 })
}

现在它给了我一个useState cannot …

每次onClick执行时，我都会收到一条关于内存泄漏的警告消息。如何使用钩子从我的功能组件中的Context.Consumer取消订阅组件useEffect？

我没有找到如何取消订阅 AppContext 的方法。AppContext.unsubsribe()不工作。

import React, {useState, useContext} from 'react';
import {withRouter} from 'react-router-dom';
import axios from 'axios';
import {AppContext} from "../context/AppContext";

const LoginPage = (props) => {

    const [name, setName] = useContext(AppContext);
    const [isLoading, setIsLoading] = useState(false);

    const onClick = () => {
        setIsLoading(true);
        axios.post('/get-name')
            .then(resp => {
                setName(resp);
                setIsLoading(false);
                props.history.push('/');
            })
            .catch(err => console.log(err))
            .finally(() => setIsLoading(false));
    };

    return (
        <div>
            <button onClick={onClick}></button>
        </div>
    );
};

export default withRouter(LoginPage);

浏览器控制台中的错误消息： …

在 React DOC 中，关于useEffect()钩子，我们得到了：

“使用 useEffect 安排的效果不会阻止浏览器更新屏幕。”

提示

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的效果不会阻止浏览器更新屏幕。

这究竟是什么意思？

示例：想象一下，我有以下内容：

• 受控输入
• 第一次渲染之后的 useEffect 会执行一些昂贵的同步计算。

function App() {
  const [inputValue,setInputValue] = React.useState('');

  useEffect(()=>{
    // RUN SOME EXPENSIVE SYNCHRONOUS FUNCTION
  },[]);

  return (
    <input value={inputValue} onChange={()=>setInputValue(event.target.value)}/>
  );

}

这是否意味着input即使在运行繁重的同步计算时，我也完全能够使用我的（由 React 使用 JS 控制，它是单线程的）？如果是这样，这怎么可能？

我试图在我的反应钩子中使用 useEffect() 在我的道具改变时更新状态。但是有延迟，并且 useEffect 仅在我再次单击钩子中的元素后才触发。我对使用钩子相当陌生，任何帮助将不胜感激。谢谢

function ImageOrderSelect (props) {
  const [clicked, setClicked] = useState(false)
  const [options, setOptions] = useState(props.options)
  const [current, setCurrent] = useState(props.current)

  useEffect(() => {
      setCurrent(props.current)
    }, [props.current])


  if(!clicked){
    return (
        <div className="image-order-select-icon" onClick={() => setClicked(!clicked)}>
            <FontAwesomeIcon size="lg" icon={faCircle} />
            <p>{current}</p>
        </div>
    )
  } else if(clicked){
      return (
          <div className="image-order-select">
              {optionsList}
          </div>
      )
  }


}

我有这个useEffect钩子：

useEffect(() => {
  setTop(t => t + (controller.position.y * tileSize))
  setLeft(l => l + (controller.position.x * tileSize))
}, [controller.position])

我希望它只在发生position变化时才进行添加。如果发生tileSize变化，我只想让它进行乘法。

我尝试将其分成两部分useEffect，但随后收到React Hook useEffect has missing dependencies警告：

useEffect(() => {
    setTop(t => t + (controller.position.y * spriteSize))
    setLeft(l => l + (controller.position.x * spriteSize))
}, [controller.position])

useEffect(() => {
    setTop((controller.position.y * spriteSize))
    setLeft((controller.position.x * spriteSize))
}, [spriteSize])

在这种情况下，最佳做法是什么？

编辑：

一个可重现的例子：

const [tileSize, setTileSize] = useState(0)
const controller = {
    position: …

这是我编写的一些运行良好的示例代码：

useEffect(() => {
  if (!rolesIsLoading && rolesStatus === 200) {
    customer.roles = rolesData.roles;
  }
}, [rolesIsLoading, rolesStatus]);

我在控制台中收到此警告：

React Hook useEffect 缺少依赖项：“customer.roles”和“rolesData.roles”。包括它们或删除依赖数组 react-hooks/exhaustive-deps

问题是，代码现在工作正常，在某些情况下，当我按照指示添加此类依赖项时，我最终会遇到无限循环或其他一些问题。

如果您遇到类似情况时如何解决此问题，我将不胜感激。

ps 解决了我遇到的问题，但如果您有时间，我仍然想听听您对此和我的代码的看法:)

我只能在渲染完成后为该变量赋值，所以我假设我必须在 useEffect() 中声明该变量，并且不可能在全局范围内为其赋值（在任何渲染之前执行）。但我也想在另一个 useEffect() 中使用该变量，但我不能，因为它是在函数内部声明的，并且它不属于全局范围。另外，有两个 useEffect -s 正常吗？我需要获取画布的上下文，并保持该上下文一致（不会在每次 DOM 更新时获取新的上下文，因为当我没有将 [] 作为第一个 useEffect 的第二个参数时会发生这种情况）。另一个是随着状态的变化在那个独特的上下文中做事。是否有意义？我的代码：

import React, { useState, useRef, useEffect } from "react";
import { degreesToRadiansFlipped } from "./helpers/degreesToRadiansFlipped";
function Circle() {
  let [degree, setDegree] = useState(0);
  const canvas = useRef();
  const inputField = useRef();
  const coordinateX = Math.cos(degreesToRadiansFlipped(degree)) * 100 + 250;
  const coordinateY = Math.sin(degreesToRadiansFlipped(degree)) * 100 + 250;

  useEffect(() => {
    const context = canvas.current.getContext("2d");
    drawCircle(context, coordinateX, coordinateY);
    return context;
    /*return function cleanUp() {
      context.clearRect(0, …

所以，我有useEffect这样的：

useEffect(()=>{
    if(foo) {
        // do something
        return () => { // cleanup function }
    }
}, [foo])

在这里，cleanup即使if块被执行，该函数也永远不会被调用。但如果我修改一下效果为：

useEffect(()=>{
    if(foo) {
        // do something
    }
    return () => { // cleanup function }
}, [foo])

有用。那么，清理工作是否仅return在最后一条语句useEffect或我缺少某些内容时才进行？

我有一个简单的日期选择器组件，带有用于预设日期范围的按钮。

问题出在我的useEffect: 我正在使用它来传达渲染的初始状态，但当然 React 会发出警告（“ useEffect 缺少依赖项”）。

有没有一个好的模式来做到这一点？

孩子：

const LAST_7 = "LAST_7";
let to, from, filter;

// figure out values for "from", "to", and "filter" (which is set to LAST_7 in case "from" and "to" are not in props)

const initial = {
    from,
    to,
    filter,
};

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

useEffect(() => {
    props.onUpdate(from, to);
}, []);

const handleClick = (e) => {
    const filter = e.target.value;
    const { from, to } = getDatesFromFilterValue(filter); …

我是新来的反应。我已经阅读了 React 文档。我不知道为什么它不起作用。所以，我来到这里。

我正在尝试在反应中创建分页。下面是我的table组件。

const Table = (props) => {
  const { description, itemCount, tableHeaders, items } = props;

  const pageSize = 5;
  const [currentPage, setCurrentPage] = useState(1);

  function handlePageChange(page) {
    setCurrentPage(page);
  }

  const registerations = paginate(items, currentPage, pageSize);
  // HERE: registerations data is correct and then I pass it to TableBody component.

  return (
    <React.Fragment>
      <TableDescription description={description} count={itemCount} />
      <div className="bg-white block w-full md:table">
        <TableHeader items={tableHeaders} />
        <TableBody items={registerations} />
      </div>
      {/* Footer & Pagination */}
      <div …