标签: react-hooks

我有一个看起来像这样的组件：

const MyComponent = props => {
  const { checked, onChange, id } = props;
  const [isChecked, setChecked] = useState(false);

  useEffect(() => {
    onChange && onChange({ isChecked: !!checked, id });
    setChecked(checked);
  }, [checked]);

  const childProps = {
    id,
    isChecked
  };

  return <ChildComponent {...childProps} />;
};

详尽的 deps lint 规则并不令人满意：

React Hook useEffect 缺少依赖项：id和onChange. 包括它们或删除依赖项数组。(react-hooks/exhaustive-deps)eslint

我知道这一点id并且onChange不会改变，因此将它们添加到依赖项数组似乎没有必要。但规则不是警告，而是明确的指示去做某事。

是 ESLint 规则：

1）在这种情况下过于谨慎和有点愚蠢，所以可以忽略吗？

2) 突出最佳实践——即最大限度地减少将来可能发生的意外错误，例如，如果父组件的更改意味着 id将在将来的某个时候更改？

3) 显示当前代码的实际/可能问题？

我刚刚读到了react的新功能钩子.阅读有关钩子 但我无法使用它.它给了我错误.

我目前使用的是16.6.0版

最后我理解了钩子.

import React, {useState} from 'react';

const Fun = () => {
    const [count, setCount] = useState(0);

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

 export default Fun;

我导入了Fun并在我的app.js文件中使用

我犯的错误是我没有安装React v16.7.0-alpha所以我使用npm add react @ next react-dom @ next安装.

谢谢

我该如何跳过第一次遇到问题useEffect。

useEffect(() => {
    const first = // ???
  if (first) {
    // skip
  } else {
    // run main code
  }
}, [id]);

在这个例子中,我有这个反应类:

class MyDiv extends React.component
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return <div>{this.state.sampleState}
   }
}

问题是我是否可以添加React钩子.我知道React-Hooks是React Class风格的替代品.但是如果我想慢慢迁移到React钩子,我可以在Classes中添加有用的钩子吗？

useState() 给我未定义的新状态变量（通知）：

const Notifications = (props) => {
    const [notifications, setNotifications] = useState(props.notifications);//notifications = undefined, props = {notifications: Array(0)}
    useEffect(() => {
        if (props.notifications) {
        setNotifications(props.notifications);
        }
    }, [props.notifications]);
    // do stuff....

我期待通知[]，然后随后setNotifications()在props.notifications更改时更新它。props.notification来自 redux 商店。我不知道这是否会改变任何东西，但我确实设置了一个初始状态。

const initialState = Immutable.fromJS({
  notifications: [],
});

不知道为什么我变得未定义...

编辑：摆脱了错字和测试代码

我可以在 useEffect 中调用另一个单独的函数吗？

我正在 iuseEffect 中调用另一个函数，但在保存文件后，它会自动将该函数添加到 useEffect 的数组参数中。

请参阅下面的代码以正确理解。

保存文件前：

  useEffect(() => {
    getData()
    console.log("useEffect ran...");
  }, [query]);

  function getData() {
    fetch(`https://jsonplaceholder.typicode.com/${query}`)
    .then(response => response.json())
    .then(json => setData(json));
  }

保存文件后：

  useEffect(() => {
    getData();
    console.log("useEffect ran...");
  }, [getData, query]);

  function getData() {
    fetch(`https://jsonplaceholder.typicode.com/${query}`)
      .then(response => response.json())
      .then(json => setData(json));
  }

它一次又一次地运行。

useState 的 setter 是否能够在组件生命周期内更改？

例如，假设我们有一个useCallback将更新状态。如果 setter 能够更改，则必须将其设置为回调的依赖项，因为回调使用它。

const [state, setState] = useState(false);
const callback = useCallback(
    () => setState(true),
    [setState] // <-- 
);

目前我有一个useLazyQuery钩子，它在按下按钮时被触发（搜索表单的一部分）。

钩子行为正常，只有在按下按钮时才会触发。但是，一旦我触发它一次，它就会在每次组件重新渲染时触发（通常是由于状态更改）。

因此，如果我搜索一次，然后编辑搜索字段，结果会立即出现，而且我不必再次单击搜索按钮。

不是我想要的用户界面，如果您完全删除搜索文本（因为它试图将搜索文本null作为变量进行搜索），它会导致错误，有什么方法可以防止useLazyQuery在重新渲染时重新获取？

这可以使用useQuery依赖于“搜索”状态来解决，当我单击按钮时，该状态会被切换。但是，我宁愿看看是否可以避免增加组件的复杂性。

const AddCardSidebar = props => {
  const [searching, toggleSearching] = useState(false);
  const [searchParams, setSearchParams] = useState({
    name: ''
  });
  const [searchResults, setSearchResults] = useState([]);
  const [selectedCard, setSelectedCard] = useState();

  const [searchCardsQuery, searchCardsQueryResponse] = useLazyQuery(SEARCH_CARDS, {
    variables: { searchParams },
    onCompleted() {
      setSearchResults(searchCardsQueryResponse.data.searchCards.cards);
    }
  });

  ...

  return (
    <div>
      <h1>AddCardSidebar</h1>
      <div>
        {searchResults.length !== 0 &&
          searchResults.map(result => {
            return (
              <img
                key={result.scryfall_id}
                src={result.image_uris.small}
                alt={result.name}
                onClick={() => setSelectedCard(result.scryfall_id)}
              /> …

我是 React 钩子的新手，但我试图将 auseEffect与 a一起使用useCallback，但遇到了臭名昭著的React Hook "useList" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks错误。

Thie 文件包含 makeRequest：

function useConnections = () => {
    const makeRequest = React.useCallback(async (props) => {
        // Determine base url, determine headers here
        const response = fetch(url, options);

        return response;
    }

    return { makeRequest };
}

这个文件是我的useListProvider：

function useListProvider = () => …

我正在使用 Enzyme 的浅层方法来测试使用useParams钩子从 URL 参数中获取 ID的组件。

我试图模拟useParams钩子，使其不调用实际方法，但它不起作用。我仍然得到TypeError: Cannot read property 'match' of undefined，所以它调用了实际的useParams，而不是我的模拟。

我的组件：

import React from 'react';
import { useParams } from 'react-router-dom';

export default () => {

  const { id } = useParams();

  return <div>{id}</div>;

};

测试：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';
import Header from './header';
import { shallow } from 'enzyme';

Enzyme.configure({ adapter: new Adapter() });

describe('<Header />', () => {

  jest.mock('react-router-dom', …