标签: react-functional-component

我有以下反应类组件每 10 秒调用一次 API。它的作品没有问题。

class Alerts extends Component {
  constructor() {
    this.state = {
      alerts: {},
    }
  }

  componentDidMount() {
    this.getAlerts()
    this.timerId = setInterval(() => this.getAlerts(), 10000)
  }

  componentWillUnmount() {
    clearInterval(this.timerId)
  }

  getAlerts() {
    fetch(this.getEndpoint('api/alerts/all"))
        .then(result => result.json())
        .then(result => this.setState({ alerts: result }))
  }

  render() {
    return (
      <>
        <ListAlerts alerts={this.state.alerts} />
      </>
    )
  }
}

我正在尝试将其转换为反应功能组件。这是我迄今为止的尝试。

const Alerts = () => {

    const [alerts, setAlerts] = useState([])

    useEffect(() => {
        getAlerts()
        setInterval(() => getAlerts(), 10000)
    }, [])

    getAlerts() …

我有一个StatusContext这样命名的上下文：

export const statusCtxInit = {
    open: false,
    toggleOpen() {
        this.open = !this.open;
    }
};

const StatusContext = React.createContext(statusCtxInit);
export default StatusContext

整个应用程序都与提供者一起包装：

// ...
<StatusContext.Provider value={statusCtxInit}>
// ...

useContext为了使用我在 FC 中使用的上下文的值，当我获得该值时它就会起作用。

function MyComp() {
    const status = useContext(StatusContext);
    return (
        <div>
            {status.open
                ? `It's Open`
                : `It's Closed`}

            <button onClick={() => status.toggleOpen()}>
                Toggle
            </button>
        </div>
    )
}

export default MyComp

另一方面，我也想通过调用来更改上下文toggleOpen，但是它不能按我想要的方式工作。实际上该值发生变化但不影响MyComp.

我做错了什么？我该怎么办？

我注意到有几种方法可以在 React 功能组件中实现看似相同的事情。当您拥有仅在此组件内部需要的本质上的配置值（只是一个常量值，从未传入或修改）时，您可以只使用常规值，也const可以将其存储在组件的状态中。

标准变量：

function Example1() {
  const a = 1
  return <div>{ a }</div>
}

存储状态：

function Example2() {
  const [a] = useState(1)
  return <div>{ a }</div>
}

我的印象是，在幕后，这会导致 Example1 在每次渲染时创建一个变量然后处理它，而 Example2 将创建一次变量并保持它直到卸载组件。那是准确的吗？就性能/良好实践而言，这些方法中的一种是否更可取？

我正在尝试使用 React-Router 5.1 和函数组件中的 useParams 钩子在 url 中传递多个参数。

但是我遇到了非常奇怪的行为。

我将网址粘贴到客户端。

网址：

 http://localhost:3000/onboarding/eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da 

小路：

<Route path = '/onboarding/:eventId?/:groupId?/:userId?' exact component = {OnboardingViewController} />

奇怪的事情#1：我必须将参数设为可选，否则浏览器会永远挂起。

我使用所有这些策略将它们找出来：

    var   {  eventId, groupId, userId } = useParams();
    var   {  eventId } = useParams();
    var   {  groupId } = useParams();
    var   {  userId  } = useParams();

奇怪的事情#2：不幸的是，当尝试使用这些参数时，会发生这种情况：

{userId: undefined, eventId: "eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da", groupId: undefined}

钩子只接受第一个参数并首先将其余部分解释为 te 的一部分。

奇怪的事情 #3：由于添加这个 url params 查询访问页面加载非常慢，需要几秒钟。

我没有看到什么，做错了什么？

回答：

我做错了什么：我使用的是 url/eventId=123。这是错误的。您只需要在 URL url/1/2/3 中的正确位置提供资源。

正确的：

http://localhost:3000/onboarding/5e9aaf4fc27583001190834e/5e9aaf60c275830011908361/5e9aaf4fc275830011908357

然后告诉路由器这些东西将被称为 eventId & groupId & userId。 …

如果我想在第一次渲染组件后调用 API，我知道我们有useEffect钩子来调用 API 方法。（我只讨论功能组件。没有类组件）。

有什么办法，我可以在我的组件第一次渲染之前调用 API。

这个问题的原因是，如果某些 UI 部分依赖于 API，我不想在第一次渲染时向用户显示任何不完整的信息，一旦我从 API 获取数据，这些信息就会改变。这似乎是一个糟糕的 UI 体验。

编辑：我得到了一些使用 useLayoutEffect 或任何消耗性标志来检查它是否渲染的建议。我已经检查过 useLayoutEffect 不起作用，并且通过使用 consumable 标志，我们只是增加了复杂性。

对此我们有没有更好的办法呢？

我正在用这个

useEffect(() => {
        const navFocusListener = navigation.addListener('didFocus', () => {
        console.log('focus');
    });

    return () => {
        navFocusListener.remove();
    };
  }, []);

我正在使用此代码也尝试了其他侦听器。但没有任何好处，我正在使用react-native-immediate-call包进行ussd拨号，但因为它没有任何回调。因此，我将此函数称为打开的拨号器，用于拨打 USSD 代码。所以现在我希望当 ussd 拨号完成后返回屏幕，并且 api 将调用以获得响应。那么我如何检测 USSD 拨号正在运行或已完成，以便我可以向 api 发出请求。

使用基本的表单/输入布局，很明显应该使用回调来处理从子组件到父组件的状态更改（由子组件启动），但是父组件如何要求子组件重新评估其状态并传达该信息回到父级？

这里的最终目标只是在提交表单按钮时触发子输入的验证。

给定的 [ts] 代码如下所示：

    const Login : React.FC<Props> = (props) => {\n        ...useStates omitted\n\n        const onSubmit = () : void => {\n          //trigger `verify()` in PasswordInput to get up-to-date `valid` state var\n\n \n        }\n        \n        return (\n            <PasswordInput\n              onValidChange={setValid} />\n            <Button\n              onPress={submit} />\n        )\n    }\n\n\n    const PasswordInput : React.FC<Props> = (props) => {\n        ...useStates omitted\n\n        const verify = () => {\n          //verify the password value from state\n\n          props.onValidChange(true)\n        }\n\n\n        return (<Input onBlur={verify}/>) \n    }\n

迄今为止采取的注释/路径： …

我有一个完全用功能组件构建的 React 应用程序。我想在屏幕上呈现元素后获取元素的高度，以相应地更改其父元素的大小。

有基于类的应用程序的解决方案，但我找不到任何用于功能组件的解决方案。

我从答案中尝试了这个解决方案，但它没有运行 useEffect 钩子

这是从我的组件中提取的代码

import React, {useRef, useEffect} from 'react';
import {
    MenuContainer,
    GrayBox,
    Wrapper

} from '../LayersMenu/LayerMenu.styles';


export const Component = ({ category, showStatistics }) => {
    const grayBoxRef= useRef(null);
    const wrapperRef= useRef(null);
    const testRef= useRef(null);
    useEffect(()=>{
        const height = wrapperRef.current.offsetHeight;
        console.log(height,'check');
      }, [wrapperRef])
    useEffect(()=>{
        const height = testRef.current.offsetHeight;
        console.log(height,'check2');
    },[testRef]);
    return (
        <MenuContainer ref={testRef}>
            <GrayBox ref={grayBoxRef}>
                <Wrapper ref={wrapperRef} hasAnyAllowedStats={showStatistics}>
                </Wrapper>
            </GrayBox>
        </MenuContainer>
    );
};

PS：接受的答案对我的答案不起作用，但它适用于他在答案中添加的项目，所以我猜我的项目结构有问题或不完全确定。

非常感谢回答

我是 React 的新手，当我单击View按钮时，我很难弄清楚如何返回一个新页面（一个组件）。我有一个用户表，每行都有一个查看按钮。我只能在完全相同的页面中检索数据，但我想在另一个页面中检索我的视图详细信息，其 url 上的 id，例如：http://user-details-1。有人可以帮我弄这个吗。谢谢！

这是我的视图代码/组件：

import React, { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";

const ViewUserDetaiils = (props) => {
  const [user, setUser] = useState(props.currentUser);

  useEffect(() => {
    setUser(props.currentUser);
  }, [props]);

  return (
    <Form>
      <div>
        <div>
          <strong>Id:</strong> {user.id}{" "}
        </div>
        <div>
          <strong>Name:</strong> {user.name}{" "}
        </div>
        <div>
          <strong>Contact:</strong> {user.contact}{" "}
        </div>
        <div>
          <strong>Email:</strong> {user.email}{" "}
        </div>
      </div>
    </Form>
  );
};

export default ViewUserDetails;

这是我的路由：

import React, { Component } from "react";
import …

我正在使用 React 功能组件，我只想更新状态的特定字段并像以前一样保留其他值。这是状态初始化 -

const[value, setValue] = React.useState({
     a: "5",
     b: "6"
});

我只想将“a”的值更新为其他值，比如说 7（同时保留“b”的相同值）。目前我正在这样做 -

setValue(currValue => ({
   ...currValue,
   a: "7"
}))

这是错误的吗？如果是，正确的做法是什么？