标签: react-functional-component

我有一个简单的问题，因为我对功能组件中的 JSX 有点困惑。

我正在做一个小项目来探索 useState() 更复杂的用法，在这个挑战的最后部分，您必须将您键入的联系人呈现到输入表单中。

这是我的代码：

import React, { useState } from "react";

function App() {
  const [inputData, setInputData] = useState({ firstName: "", lastName: "" });
  const [contactsData, setContactsData] = useState([]);

  function handleChange(event) {
    const { name, value } = event.target;
    setInputData((prevData) => {
      return {
        ...prevData,
        // will copy over all properties from the previous input data and then replace whichever one we are currently working on with the updated value
        [name]: value,
      };
    });
  }

  function handleSubmit(event) …

我有一个组件定义为

export default function MyComp({
    ...someprops
}) {
    const [data, setData] = useState([]);
    const searchRef = useRef();

    return (
        <Box>
            {!showEmptyState ? (
                <LzSearch
                    onUpdate={(items) => setData(items)}
                    ref={searchRef}
                />
            ) : (
               <Box />
            )}

        </Box>
    );
}

其中 LzSearch 定义为

const LzSearch = forwardRef((props, ref) => {
    const {       
        ...rest
    } = props;
    const classes = useStyles();
    const hashData = {};

    console.log(hashData);

    function updateHashData() {
       // Function is called at some point after getting data from API
       setHashData(...);
       onUpdate(...) …

我想在React使用中构建一个计时器应用程序functional component，以下是要求。

该组件将显示一个初始化为 的0数字counter。

该组件将在数字Start下方显示一个按钮counter。

单击Start按钮后，计数器将开始运行。这意味着该counter数字将开始每 1 秒增加 1。

当计数器运行（递增）时，该Start按钮将变为Pause按钮。

单击Pause按钮后，counter将保留其值（数字）但停止运行（递增）。

该组件还将显示一个Reset按钮。单击Reset按钮后，counter将转到其初始值（0在我们的例子中）并停止运行（递增）。

下面是我已经实现的代码，但clearInterval似乎不起作用，另外我如何实现重置按钮？

代码：

import React, { useState, useEffect } from "react";

export default function Counter() {
  const [counter, setCounter] = useState(0);
  const [flag, setFlag] = useState(false);
  const [isClicked, setClicked] = useState(false);
  var myInterval;

  function incrementCounter() …

我想知道对于 react 类组件，我们有componentWillMount()生命周期方法，我们可以在加载组件之前执行任务。诸如调用后端并使用响应来显示该前端中的数据之类的任务。如果我想在功能组件中使用相同的东西怎么办？就像我使用了 react chartJS 一样，为此我想从后端响应中检索数据值，然后图表将根据这些数据填充。

我希望我能很好地解释问题陈述，如果没有，请询​​问任何信息。

我确信这是我的大脑不明白的情况...但是...

我习惯于使用类组件，而不是一般的功能组件，并且使用 React Redux，我尝试编写一个调度操作的组件。正如您可能知道的那样，该操作当然会导致减速器更新 Redux 状态（存储）。然而，尝试用 useSelector 和 useDispatch 替换 mapStateToProps 和 mapDispatchToProps 却让我创建了一个循环......我猜我错误地使用了 useSelector 。

import { fetchPostsByTerm } from "../../_actions/_postActions";
import { useSelector, useDispatch } from "react-redux";

const payload = { vocabulary: "tags", term: "thiphif" };

export const PostsByTerm = () => {
  const dispatch = useDispatch();
  dispatch(fetchPostsByTerm(payload));
  const posts = useSelector((state) => state.postsByTerm);

  return (
    <div>
      <h1 className="post_heading">Posts</h1>
      {posts ? posts.map((post) => <h1>{post.entityLable}</h1>) : <h1>no posts</h1>}
    </div>
  );
};

也许我使用正确？同一页面上还有其他组件更新状态

这个函数是正确的 React 函数组件吗？或者为什么我应该使用props对象？

function StyledLabel(value, cssClass){
   return <span className={cssClass}>{value}</span>
}

我看到的唯一区别是调用此函数：

<App>
   {StyledLabel(value, cssClass)}
</App>

我有标题问题。我的代码给了我一个无限循环——控制台日志一直在循环。

我只想通过 .map() 将 axios 响应分配给组件状态 nad 渲染元素

成分：

const Translator = () => {
    const [languages, setLanguages] = useState([]);
    getLanguages().then(data => {
       setLanguages(data.languages)
    });
    
    console.log(languages);
  
  return (
    <header className="translator__header">
        {languages.map( lang => {
            <h1>{lang.language}</h1>
        })}
    </header>
  );
};

资源：

export default () => {
    return Axios.get(`${config.baseURL}/languages`, {headers: config.headers}).then(res => {
        return res.data.data;
    });
}

请求给数组这样的对象

{language: "af"}

我是 React 的新手，我了解 Functional 和 Class 组件以及 Hooks 的概念，例如 useEffect 和 useState；因此，我在将这些知识转化为实践时遇到了麻烦，因为我正在研究以下 React 组件，该组件生成一个普通的 Javascript API 调用，我现在想使用 State 和 Hooks 将其转换为“真正的”React API 调用。

我的问题如下：我想呈现 API 返回的员工对象，从员工的名字和姓氏开始，然后是其他信息。

以纯 Javascript 形式对 API 的请求运行良好并返回所需的数据；因此，我不确定根据定义将状态设置为什么（0？假？别的什么？这取决于什么，我怎么知道？）。

这是代码：

import React, {useEffect, useState} from 'react';
import { Link } from "react-router-dom";
import {
    Container,
    Row,
    Col,
    Card,
    CardBody,
    Table,
    Button, Alert, Modal, ModalHeader, ModalBody
} from "reactstrap";


const ContactsList = (props) => {

        let request = new XMLHttpRequest()

        // Open a new connection, using the GET request …

我正在开发我的第一个 React 项目，但遇到以下问题。我希望我的代码如何工作：

• 我将项目添加到可通过上下文访问的数组中（context.items）
• 我想在组件中运行 useEffect 函数，只要值发生变化，就会显示 context.items

我尝试过的：

1. 将上下文（ 和context）context.items列为 useEffect 中的依赖项

• 这导致组件在值更改时不更新

2. 列出context.items.length

• 然而，这导致组件在数组长度发生变化时更新，而不是在单个项目的值发生变化时更新。

3. 将上下文包装在Object.values(context)

• 结果正是我想要的，除了 React 现在抱怨*传递给 useEffect 的最后一个参数改变了渲染之间的大小。该数组的顺序和大小必须保持不变。*

您知道有什么方法可以修复此 React 警告或在上下文值更改时运行 useEffect 的不同方法吗？

好吧，不想添加代码，希望这对我来说是一些简单的错误，但即使有一些答案，我仍然无法解决这个问题，所以在这里，减少了希望简化。

上下文组件：

const NewOrder = createContext({
  orderItems: [{
    itemId: "",
    name: "",
    amount: 0,
    more:[""]
  }],
  addOrderItem: (newOItem: OrderItem) => {},
  removeOrderItem: (oItemId: string) => {},
  removeAllOrderItems: () => {},
});

export const NewOrderProvider: React.FC = (props) => {
  // state
  const [orderList, setOrderList] = useState<OrderItem[]>([]);

  const …

react-hook-form我正在和的帮助下创建一个带有文件上传的表单Yup。我正在尝试在我的子组件中使用 register 方法。当将寄存器作为道具传递时（在大括号中解构），验证和提交不起作用。您始终可以提交表单，并且提交的文件对象为空。这是一个沙盒链接。