Questions tagged «react-hooks»

在带有钩子的React中，更新状态的正确方法是嵌套对象是什么？ export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) 一个人怎么会使用setExampleState到的更新exampleState来a（附加一个字段）？ const a = { masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b", fieldTwoTwo: "c" } }, masterField2: { fieldOne: "c", fieldTwo: { fieldTwoOne: "d", …

114 javascript  reactjs  react-hooks 

我期望状态在道具更改时重新加载，但这不起作用，并且user变量在下次useState调用时不会更新，这是怎么回事？ function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } 码笔

109 reactjs  react-hooks 

我正在尝试新的React Hooks，并且有一个带有计数器的Clock组件，该计数器应该每秒增加一次。但是，该值不会增加到超过一。 function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div> 运行代码段隐藏结果展开摘要

107 javascript  reactjs  react-hooks 

是否可以componentDidMount通过钩子在React功能组件中进行仿真？

107 javascript  reactjs  react-hooks 

根据文档： componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。 我们可以使用新的useEffect()钩子来模拟componentDidUpdate()，但似乎useEffect()在每次渲染后都被运行，即使是第一次也是如此。如何使它不在初始渲染上运行？ 如您在下面的示例中看到的那样，它componentDidUpdateFunction是在初始渲染期间打印的，但componentDidUpdateClass在初始渲染期间没有打印的。 function ComponentDidUpdateFunction() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } class ComponentDidUpdateClass extends React.Component { constructor(props) { super(props); this.state = { count: …

106 javascript  reactjs  react-hooks 

我正在迁移带有TypeScript的React项目以使用挂钩功能（React v16.7.0-alpha），但是我不知道如何设置已分解元素的类型。 这是一个例子： interface IUser { name: string; } ... const [user, setUser] = useState({name: 'Jon'}); 我想强制user变量为type IUser。我唯一成功的试用是分两个阶段进行的：键入，然后初始化： let user: IUser; let setUser: any; [user, setUser] = useState({name: 'Jon'}); 但是我敢肯定有更好的方法。另外，setUser应将其初始化为以aIUser作为输入且什么都不返回的函数。 另外，值得注意的是，const [user, setUser] = useState({name: 'Jon'});不进行任何初始化就可以正常使用，但是我想利用TypeScript强制对init进行类型检查，特别是如果它依赖于某些道具的话。 谢谢你的帮助。

88 reactjs  typescript  react-hooks 

让我解释一下此代码的结果，以便轻松询问我的问题。 const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const handleName = e => { const { value } = e.target; …

83 reactjs  react-hooks 

使用useState挂钩时出现此错误。我有它的基本形式，正在看react docs作为参考，但是仍然出现此错误。我已经准备好面对手掌的时刻... export function Header() { const [count, setCount] = useState(0) return <span>header</span> }

78 javascript  reactjs  react-hooks 

我正在尝试使用组件接收的道具使用React hook setState（）设置状态。我尝试使用以下代码： import React,{useState , useEffect} from 'react'; const Persons = (props) => { // console.log(props.name); const [nameState , setNameState] = useState(props) console.log(nameState.name); console.log(props.name); return ( <div> <p>My name is {props.name} and my age is {props.age}</p> <p>My profession is {props.profession}</p> </div> ) } export default Persons; 问题在于加载组件时正在设置状态。但是，当它收到新的道具时，状态不会更新。在这种情况下如何更新状态？提前致谢。

77 reactjs  react-hooks 

我正在学习有关如何使用钩子注册事件的Udemy课程，讲师给出了以下代码： const [userText, setUserText] = useState(''); const handleUserKeyPress = event => { const { key, keyCode } = event; if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) { setUserText(`${userText}${key}`); } }; useEffect(() => { window.addEventListener('keydown', handleUserKeyPress); return () => { window.removeEventListener('keydown', handleUserKeyPress); }; }); return ( …

77 javascript  reactjs  react-native  react-hooks 

据我了解，我可以将refs用于单个元素，如下所示： const { useRef, useState, useEffect } = React; const App = () => { const elRef = useRef(); const [elWidth, setElWidth] = useState(); useEffect(() => { setElWidth(elRef.current.offsetWidth); }, []); return ( <div> <div ref={elRef} style={{ width: "100px" }}> Width is: {elWidth} </div> </div> ); }; ReactDOM.render( <App />, document.getElementById("root") …

77 javascript  reactjs  react-hooks 

以下是使用React useState Hook的标准方法： const [count, setCount] = useState(0); 但是，const count显然要将此变量重新分配给其他原始值。 为什么变量没有定义为let count？

33 javascript  reactjs  ecmascript-6  react-hooks 

问题出在这里：我试图在单击按钮时调用2个函数。这两个函数都会更新状态（我正在使用useState挂钩）。第一个函数将value1正确更新为'new 1'，但是在1s（setTimeout）之后触发，第二个函数将值2更改为'new 2'，但是！它将value1设置回'1'。为什么会这样呢？提前致谢！ import React, { useState } from "react"; const Test = () => { const [state, setState] = useState({ value1: "1", value2: "2" }); const changeValue1 = () => { setState({ ...state, value1: "new 1" }); }; const changeValue2 = () => { setState({ ...state, value2: "new 2" …

31 javascript  reactjs  react-hooks 

我试图弄清楚如何使用Firebase侦听器，以便使用React Hook更新来刷新云Firestore数据。 最初，我使用带有componentDidMount函数的类组件来获取Firestore数据。 this.props.firebase.db .collection('users') // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid)) .doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid)) .get() .then(doc => { this.setState({ name: doc.data().name }); // loading: false, }); } 当页面更新时，该中断了，因此我试图弄清楚如何移动侦听器以响应挂钩。 我已经安装了react-firebase-hooks工具-尽管我不知道如何阅读说明才能使其正常工作。 我有一个功能组件，如下所示： import React, { useState, useEffect } from 'react'; import { useDocument } from 'react-firebase-hooks/firestore'; import { BrowserRouter as Router, Route, Link, Switch, useRouteMatch, } from 'react-router-dom'; …

27 javascript  reactjs  firebase  google-cloud-firestore  react-hooks 

我正在使用几个星期前发布的React Router的新useHistory挂钩。我的React-router版本是5.1.2。我的React版本为16.10.1。您可以在底部找到我的代码。 但是，当我从react-router导入新的useHistory时，出现此错误： Uncaught TypeError: Cannot read property 'history' of undefined 这是由React-router中的这一行引起的 function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0; } return useContext(context).history; <---------------- …

18 reactjs  react-router  react-hooks  react-router-dom  react-context