标签: react-hooks

假设我有一些状态变量width，并且我知道它永远不会改变，但我需要根据我收到的道具对其进行一些计算。我不想在函数体内执行此操作，因为它将在每次重新渲染时运行。所以：

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const [width, setWidth] = useState(SOME_CONSTANT_NUMBER * multiplier);

  return (
    <div>
      {width}
    </div>
  );
}

现在我还实例化了一个setWidth我永远不会使用的函数。

我可以使用钩子仅在安装时运行，但这需要更多代码，而且不是必需的。

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const [width, setWidth] = useState(0);

  useHook(() => {
    const updatedWidth = SOME_CONSTANT_NUMBER * multiplier;
    setWidth(updatedWidth);
  }, []);

  return (
    <div>
      {width}
    </div>
  );
}

我认为最糟糕的方法如下，因为它会在每次重新渲染时计算它：

const SOME_CONSTANT_NUMBER = 50;

const someFunc = ({multiplier: number}) => {
  const …

我希望用户从计算机“上传”文件，将其存储在浏览器中（我猜）并显示图像，而不将其发送到服务器。基本上，我希望这种情况发生（网站上的示例）： https: //www.javascripture.com/FileReader

这本身有效，但我正在使用react-dropzone，但它不起作用。

我的代码：

import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import styles from "./dropzone.module.css";
import ImageZone from "../imagezone";

export default function Dropzone() {
  const [path, setPath] = useState("");
  const openFile = () => {
    const reader = new FileReader();
    reader.onload = () => {
      const dataURL = reader.result;
      setPath(dataURL);
    };
  };
  const onDrop = useCallback(acceptedFiles => {
    openFile();
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return …

我刚刚开始在 React 中使用 typescript。我尝试将它与 React useReducer 挂钩一起使用，但由于一个奇怪的错误而陷入困境。

这是我的代码：

    export interface ContractObj {
      company: string;
      negotiationRenewalDate: string;
      periodEnd: string;
      periodStart: string;
      scheduleForRenewal: boolean;
      contractId: string;
    }

    type State = {
      loading: boolean;
      error: boolean;
      contractsData: ContractObj[];
    };

    type Action =
      | { type: 'FETCH_SUCCESS'; payload: ContractObj[] }
      | { type: 'FETCH_ERROR'; payload: null };

    const initialState: State = {
      loading: true,
      error: false,
      contractsData: []
    };

    const reducer = (state: State, action: Action) => {
      switch (action.type) {
        case 'FETCH_SUCCESS':
          return …

我有一个输入标签，当我按下转义键时，我希望输入元素上的焦点消失，这意味着不再有文本光标或任何焦点样式（当用户输入时，他们的输入不会进入输入标签）。

下面的代码是我尝试实现上述功能的尝试，但它没有按预期工作。我想让这段代码按预期工作。

import React, { useRef } from 'react';

const onEscape = function (action) {
    window && window.addEventListener('keydown', (e) => {
        if (e.key === "Escape") {
            action();
        };
    });
};

const MyComponent = () => {

    ...

    const descRef = useRef();
    onEscape(() => {
        descRef.blur();
    });

    return (
        <div>                
            <input
                ref={descRef}
                ...
            />
        </div>
   );
};

我已经测试了该onEscape函数，并且在将其他操作传递给它时它可以工作（当用户按下转义键时，它会执行传递给 onEscape 函数的任何函数）

当我在 React 应用程序中使用 ScrollToTop 组件时，我在浏览器中收到此警告：

第 12:6 行：React Hook useEffect 缺少依赖项：'history'。包括它或删除依赖数组 react-hooks/exhaustive-deps

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

我可以做哪些更改来消除此警告？谢谢！

我正在关注有关处理 YouTube 上获取错误的反应教程。我完全按照教员的做法做了，但由于某种原因，catch 方法没有捕获 throw 错误消息。这是代码：

const Home = () => {
  const [blogs, setBlogs] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      fetch("http://localhost:8000/blogs")
        .then((res) => {
          if (!res.ok) {
            throw Error("This error is not getting caught");
          }
          return res.json();
        })
        .then((data) => {
          setBlogs(data);
          setIsPending(false);
          setError(null);
        })
        .catch((err) => {
          setIsPending(false);
          setError(err.message);
        });
    }, 1000);
  }, []);

  return (
    <div className="home">
      {error && <div>{error} </div>}
      {isPending && <div>Loading...</div>}
      {blogs …

我正在制作一个小型音频播放器应用程序并尝试将我的反应类组件转换为功能组件。

类组件的原始代码在这里：

class Player extends React.Component {

    constructor(){
    super()

    this.state = {
        tracks: [
          {title: "first track", data: track1},
          {title: "second track", data: track2},
          {title: "third track", data: track3},
        ],
        currentTrack: 0,
    }

    }

     changeData(trackIndex){
      this.setState({currentTrack: trackIndex})
    }
  
    render(){
        return <div style={{color: this.props.color}}>
            <h1>Player</h1>
           <AudioPlayer
            src= {this.state.tracks[this.state.currentTrack].data}
            />
            <div style={{color: "green"}}>
                <ul>
                    {this.state.tracks.map((trackElem, index) => (
                       <li onClick={()=> this.changeData(index)}>{trackElem.title}</li>
                    ))}
                </ul>
            </div>
        </div>
    }
}

我尝试了以下转换：

const Player2 = () => {

   const Items = [
          {title: "first track", data: …

你好，

这是我第一次使用 React。我想以 json 格式获取一些数据并将其列在我的页面中。下面的代码不起作用。

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

function DataFetching() {
  const [users, setUsers] = useState({ hits: [] });
  //const [query, setQuery] = useState("redux");

  useEffect(async () => {
    const fetchData = async () => {
      const result = await axios("url");
      setUsers(result.data);
    };
  }, []);

  return (
    <div>
      <p>Hellooooo</p>
      <ul>
        {users.hits.map((user) => (
          <li key={user.id}>{user.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetching;

我有从 redux 中提取的事件，如果events数组包含数据，updateData则将用于将事件过滤到状态 var 中data。

我已经data和events都添加到了这里提到的依赖数组中。但我仍然收到此错误：

const SingleTable = () => {
    const events = useSelector(state => eventsSelector(state));
    const [data, updateData] = useState([]);
    const [sortCol, updateSortCol] = useState(0);
    const [sortDir, updateSortDir] = useState('ascending');

    useEffect(() => {
        const formattedArray = events ? formatLoss(events): [];

        events && updateData(formattedArray);
    }, [data, events]);

    //...

想法，想法？

而不是传递的props父母和child1（的child2的父） - >到的child2，我想使用createContext和接收与价值useContext。
我试图做的是不正确的，因为我收到了一个错误**'booleanContext' is not defined**。

如何传递createContext状态/值？

App.js
CreatePass 是 SignUp 中的一个组件

  const [signUpFirst, setIfSignUp] = useState(true);
  const booleanContext = createContext(setIfSignUp);
  
 return (
    <booleanContext.Provider value={setIfSignUp}>

   <div>
     </Switch>
   <Route exact path='/signup'>
          <SignUp homePage={exitSignUpPage} setUserNumber={setUserID} />
        </Route>
        <Route exact path='/home'>
          <Home userIDNumber={userID} setIfSignUp={setIfSignUp} />
        </Route>
      <CreatPass /> 
      </Switch>
     </div>
    </booleanContext.Provider>
  );

注册.js

  render() {
    return (
      <div className='signUp-div'>
        <Header />
        <Router history={history}>
          <div className='form-div'>
            <Redirect to='/signup/mobile' />
            <Switch>
              <Route exact path='/signup/mobile' …