标签: react-functional-component

在我的代码中，我遇到一些间隔问题。我有这样的情况

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    const timer = setInterval(() => {
      if (count >= 10) {
        clearInterval(timer);
      } else {
        setCount((prevCount) => prevCount + 1);
      }
    }, 1000);
  }

  return (
    <>
      <button onClick={handleClick}>start</button>
      <p>{count}</p>
    </>
  );
}

export default App;

我想做的是当用户单击按钮时启动一个间隔，并在计数器达到 10 时停止它，但它永远不会停止，调试器说内部setInterval计数始终为 0。有人知道问题是什么吗？我还发现，如果我class像这样将组件重写为组件

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleClick() {
    let …

"map" is not a function我在进行 API 调用时遇到错误。我不久前才开始学习 React 和 API。我尝试将状态更改为 object 但未定义，如[].
我得到的地图不是一个函数。也许我缺少调用 API 的东西。这是下面的代码

function Facility() {
  
  const [facility, setFacility] = useState([]);

 try {
      const fetch = await Axios.get(
        //API
      )
      //setFacility(fetch.data);
    console.log('result', fetch.data);
    } catch (err) {
      console.log(err);
    }
  };


  return (      
        <Table  >
          <TableHead>
            <TableRow>
              <TableCell />
              <TableCell >
                Facility Code
              </TableCell>
              <TableCell >
                Facility Name
              
            </TableRow>
          </TableHead>
          <TableBody>
            {facility.map((item, idx) => {
              return (
                <>
                  <TableRow
                    key={idx}
                  >
                   
                    <TableCell >
                      {item.facility_code}
                    </TableCell>
                    <TableCell>{item.facility_name}</TableCell> …

我有一个带有这样的代码的组件：

const Abc: React.FC<AbcTypes> = ({...}) => {...}

Abc.getLayout = () => {...}

我不清楚如何getLayout在 Typescript 中定义/扩展 Abc 组件的方法？

children当使用命名函数而不是箭头函数时，在以打字稿编写的 React 组件中使用关键字传递子节点的正确方法是什么？

在箭头函数中我可以写这样的东西：

const MyComponent: React.FC = ({children}) => {
   return <div>{children}</div>
}

export default MyComponent;

但是我如何用函数做同样的事情normal呢？我试过

import React from "react";

function MyComponent({children}): JSX.Element{
   return <div>{children}</div>
}

export default MyComponent;

但是 eslint 会抛出以下错误：

var children: any
Object pattern argument should be typed. eslint(@typescript-eslint/explicit-module-boundary-types)
'children' is missing in props validation eslint(react/prop-types)

我可以通过从 React 导出来消除错误ReactNode。

import React, { ReactNode } from "react"

function MyComponent({children}: ReactNode): JSX.Element{
   return <div>{children}</div>
}

export default MyComponent;

但这是否被认为是解决此问题的可行方法，或者还有其他被认为是最佳实践的方法吗？

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

import MakeCard from './MakeCard.js';

export default function GameCards(props) {
  const [images, setImages] = useState([{}]);

  // Render component after fetching images
  useEffect(() => {
    getImages(props.cards).then(images => setImages(images));
  }, [props.cards]);

  // shuffle images and update state.
  const shuffleCards = (e) => {
    console.log("clicked");
    let newImages = images;
    for (let i = newImages.length - 1; i >= 0; i--) {
      let temp, j;
      j = Math.floor(Math.random() * i);
      temp = newImages[i];
      newImages[i] = images[j];
      newImages[j] = temp; …

各位开发人员大家好，

我有这个问题，但我的同事们似乎没有达成一致。

考虑到 JS 提升以及组件安装时不会调用函数表达式，似乎可以安全地假设我们不会因声明违反“定义之前使用”的方法而遇到任何问题。

但我想知道忽略 lint 关于它的警告并按字母顺序或根据逻辑块或其他方式声明组件的函数是否安全......？即使首先声明的函数调用稍后声明的另一个函数？

例如（这只是一个具有大量功能的大型功能组件的简化，其他开发人员很难围绕所有功能进行组织）：

const SomeRandomFC = () => {

  // User logics
    const changeUser = id => {
    if (id !=== currentId) {
      getDatabase(id);
    }
    const getUser = id => ...

 // Database logics
   const getDatabase = user => [fetch logics];
   const updateDatabase = id => ... 

}

谢谢！

我正在尝试通过输入元素更新反应功能组件中的值，但在第一个值之后我无法输入

我的代码：

import React from "react";
import "./App.css";

const { useState } = React;
function App() {
    const [items, setItems] = useState([
        { value: "" },
        { value: "" },
        { value: "" },
    ]);
    const [count, setCount] = useState(0);
    const Item = React.memo(({ id, value, onChange }) => {
        return (
            <div className="item">Item
                <input
                    onChange={(e) => onChange(id, e.target.value)}
                    value={value}
                />
            </div>
        );
    });
    return (
        <div className="app">
            <h1>Parent</h1>
            <p style={{marginTop: '20px'}}>Holds state: {count}, Does't passes to it items</p>
            <p …

我对 React 和 js 总体来说是新手，我正在学习 React 速成课程，并在课程中的某个时刻陷入了这个错误。这是我收到的错误消息是针对 PreventDefault 方法的，我用该方法来阻止页面刷新。

这是 2 个文件问题

import { useState } from "react"

export function NewTodoForm({onSubmit}){
    const [newItem, setNewItem] = useState("")
  function handleSubmit(e) {

    e.preventDefualt()
    if (newItem === "") return
    onSubmit(newItem)
    
    setNewItem("")
  }
return (
    <form className="new-item-form" onSubmit={handleSubmit}>
        <div className="form-row">
          <label htmlFor="item"> New Item</label>
          <input value={newItem} onChange={e => setNewItem(e.target.value)} type="text" id="item"></input>
        </div>
        <button className="btn" >
          Add
        </button>
      </form>
)
}

import "./styles.css"
import { useState } from "react"
import { NewTodoForm } from "./NewTodoForm"

function …

我正在 useEffect 钩子内从服务器获取用户列表，并尝试将其显示在 HTML 选择下拉列表中。像这样的代码和框链接 正如您所见，下拉列表中没有显示任何内容。但与此同时，所有数据都存在，因为它显示在下面的列表中。

我尝试在没有任何库的情况下实现普通的 HTML 选择，目前正在使用 react-select。我也试过这个：

{ posts? (<Select options={posts}) : null }

但没有成功。我在这里错过了什么？如何在下拉列表中显示从服务器获取的数据？

我试图将一段代码设置到它自己的组件中，但是，这样做后数据不会显示：

代码 StackBlitz 示例

正如您从图片中看到的，组件设置的两个输入都是空白的。我假设这可能与关闭有关，但我不确定，而且更困惑如何解决这个问题。

应用程序.tsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { SimpleTable } from './components/SimpleTable/SimpleTable';
import ITableCol from './components/SimpleTable/ITableCol';

interface IItem {
  userId: number;
  id: number;
  title: string;
  body: string;
}

interface IIdItem {
  [key: string]: number;
}

export const App = () => {
  const getItems = async () => {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts');

    const twoItems = [res.data[0], res.data[1]];

    setItems(twoItems);
  };

  const getTableCols = (): ITableCol[] => { …