标签: react-hooks

我想测试 api 调用和返回的数据，这些数据应该显示在我的功能组件中。我创建了执行 api 调用的 List 组件。我希望返回的数据显示在组件中，为此我使用了 useState 钩子。组件如下所示：

const List: FC<{}> = () => {
    const [data, setData] = useState<number>();
    const getData = (): Promise<any> => {
        return fetch('https://jsonplaceholder.typicode.com/todos/1');
    };

    React.useEffect(() => {
        const func = async () => {
            const data = await getData();
            const value = await data.json();
            setData(value.title);
        }
        func();
    }, [])

    return (
        <div>
            <div id="test">{data}</div>
        </div>
    )
}

我写了一个测试，其中我嘲笑了 fetch 方法。我检查 fetch 方法是否已被调用并且它确实发生了。不幸的是，我不知道如何测试响应返回的值。当我尝试 console.log 时，我只是得到 null，我想得到“示例文本”。我的猜测是我必须等待从 Promise 返回的这个值。不幸的是，尽管尝试使用行为和等待方法，但我不知道如何实现它。这是我的测试：

it('test', async () => {
    let …

我是一名初学者 React 开发人员，我对这个特定的代码片段有疑问。

问题：

1. 即使我直接复制其值并将其呈现为单独的子项，也并非所有虚拟数据都被呈现
2. 当我单击添加按钮创建新的输入表单时，它不会添加到渲染中。

我特意选择使用 useRef 而不是 useState，因为在用户添加或编辑他们想要的任何链接后，我想将 keyRef 发送到 NoSQL 数据库；而当我使用 useState() 时，它给了我陈旧的状态问题，其中包含所有链接的数组没有不断更新。

有什么建议么？谢谢，麻烦您了！

CodeSandbox链接：https://codesandbox.io/s/react-hooks-counter-demo-forked-0bjdy?file=/src/index.js

应用程序.js

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import { links } from './links';

import "./styles.css";

function App() {
  const [loaded, setLoaded] = useState(false);
  const formRef = useRef([]);
  const keyRef = useRef([]);

  if (!loaded) {
    keyRef.current = links;
    links.forEach(link => RenderLinks(link.id));
    setLoaded(true);
  }

  function RenderLinks(id) {
    const formLength = formRef.current.length;

    if (id === null)
    formRef.current = …

我正在尝试使用 react hooks 来解决一个简单的问题。我相信解决方案很愚蠢，但我没有看到。我试图在我的 package.json 中查看但没有找到解决方案。我很确定我正在以一种好的方式宣布我的状态。

import React, { useEffect } from "react";
import "./App.css";
import Chuck from "./gettyimages-83457444-612x612.jpg";
import axios from "axios";

function App() {
  const [state, setState] = useState({
    joke: "",
  });

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

  const fetchData = async () => {
    const result = await axios.get("https://api.chucknorris.io/jokes/random");
    console.log(result.data.value);
    setState({ ...state, joke: result.data.value });
  };
  return (
    <div className="container">
      <div className="row">
        <div className="col-6">
          <h1 className="title">Chuck API</h1>
          <img src={Chuck} alt="ChuckNoris" />
        </div>
        <div className="col-6 searchJokeCol">
          <div className="card"> …

我想删除 React Native 中标题底部的微弱边框。我正在使用useLayoutEffect()钩子修改标题，但无法删除边框。我尝试过使用borderBottomWidth: 0insideheaderStyle但它不起作用。

    useLayoutEffect(() => {
        navigation.setOptions({
          title: "Signal",
          headerStyle: { backgroundColor: "#fff", borderBottomWidth: 0 },
          headerTitleStyle: { color: "#000" },
          headerTintColor: "#000",
        });
      }, [navigation]);

显示要删除的边框线的模拟器屏幕截图

我的应用程序工作正常，然后我将其更新为 React 18，现在，当我从一条路线导航到另一条路线时（如果当前路线使用 useEffect 在加载时调用某些 API），它会抛出“destroy is not a function”。我在这方面搜索过互联网，但每个问题都与此问题无关。也许反应 18 是新的，这就是为什么我找不到解决方案。尽管当我重新加载同一页面时，它加载得很好。就在我导航时应用程序崩溃了。如果我评论 useEffect 一切正常

这是我的 useEffect 代码

//on mount useEffect
  useEffect(async () => {
    getCases()
  }, []);

  //api calls functions ====>

  //get cases function
  const getCases = async () => {
    const response = await Get(CASES.get, token);
    setLoading(false);
    if (!response.error) {
      const { data } = response;
      setCases(data);
      console.log("fetched=======>", response);
    } else {
      setError(response.error);
      console.log("error====>", response);
    }
  };

这是我得到的错误

Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22768:1)
    at …

我现在对新反应挂钩 API 的用例以及你可以用它做什么感到非常惊讶.

在试验期间出现的一个问题是,在使用时总是创建一个新的处理函数以便抛弃它是多么昂贵useCallback.

考虑这个例子:

const MyCounter = ({initial}) => {
    const [count, setCount] = useState(initial);

    const increase = useCallback(() => setCount(count => count + 1), [setCount]);
    const decrease = useCallback(() => setCount(count => count > 0 ? count - 1 : 0), [setCount]);

    return (
        <div className="counter">
            <p>The count is {count}.</p>
            <button onClick={decrease} disabled={count === 0}> - </button>
            <button onClick={increase}> + </button>
        </div>
    );
};

虽然我将处理程序包装成一个useCallback以避免在每次渲染时传递一个新的处理程序,但仍然必须创建内联箭头函数,以便在大多数情况下抛弃它.

如果我只渲染一些组件,可能不是什么大问题.但如果我这样做了1000次,对性能的影响有多大？是否有明显的性能损失？什么是避免它的方法？可能是一个静态处理程序工厂,只有在必须创建新处理程序时才会调用它？

我有一些副作用要应用，并且想知道如何组织它们：

• 一次性使用
• 或几种useEffects

在性能和体系结构方面有什么更好的选择？

在简单的React类组件中，我们用来更改props以这种方式声明：

constructor(props) {
    super(props)

    this.state = {
      pitch: props.booking.pitch,
      email: props.booking.email,
      firstName: props.booking.firstName,
      arrivalDate: props.booking.arrivalDate
    }
} 

但是我不知道如何在新功能中（如Hooks）执行此操作，但是我正在尝试以这种方式执行操作。

const GenerateDescHook = ({ description: initialDesc }) => {
  const [description, setDescription] = useState(null)

useEffect(() => {
    setDescription(initialDesc)
  }, {})

 function handleChangeVariance(newVariance) {
    setDescription({
      ...description,
      template: {
        ...description.template,
        variance_name: newVariance,
      },
    })
  }

}

基本上，我只需要更改描述道具，该道具来自另一个父组件以变为状态。请问，我能告诉我如何以新的方式像胡克斯一样去做吗？

因此，React 16.8中提供了挂钩。从他们的文档来看，Hooks可以作为功能组件中状态的替代者。基本挂钩是：useState，useEffect，useContext，但也有一些额外的钩子，其和为之一useReducer，它看起来像它使用相同的action-dispatch的终极版做架构。

问题是，是否由于相似而取代Redux？

是否更适合特定项目？

它适合哪里？

是否有使用任何好处useMemo（例如，对于密集的函数调用），而不是使用的组合useEffect和useState？

这是两个自定义钩子，它们的乍看效果完全相同，除了useMemo的返回值null位于第一个渲染器上：

const useCalculate = numberProp => {
  const [result, setResult] = useState<number>(null);

  useEffect(() => {
    setResult(expensiveCalculation(numberProp));
  }, [numberProp]);

  return result;
};

const useCalculateWithMemo = numberProp => {
  return useMemo(() => {
    return expensiveCalculation(numberProp);
  }, [numberProp]);
};

https://codesandbox.io/s/nkxolxwzkj

两者都计算每次“道具”更改时，useMemo踢球的“缓存” 在哪里？

现实世界中有哪些示例useMemo？