我使用 React Hook 来增加和减少数字。但是当减少到0以下然后计算负值时，我遇到了一个问题，我不想要负值，如何使用react hook停止负值？
我已经尝试过这段代码。
import React, { useState, useEffect } from "react";
const Home = () => {
const [count, setCount] = useState(0);
const onClick = () => {
setCount(count + 1);
};
const onClickDec = () => {
setCount(count - 1);
};
return (
<div>
<h1>Please click me for increase {count}</h1>
<button className="btn btn-primary btn-sm" onClick={onClick}>
+
</button>
<button className="btn btn-primary btn-sm" onClick={onClickDec}>
-
</button>
</div>
);
};
export default Home;
任何建议，请。
谢谢
我将状态挂钩作为道具传递给我的组件，并且我的“setCity”工作得很好，但是当我尝试实现 setFlag 时，我收到一条错误消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function”
那么为什么我可以设置city的值而不是flag呢？我将道具从“应用程序”传递到“页脚”，然后再传递到“搜索栏”。
function App(){
const [city, setCity] = useState("");
const [flag, setFlag] = useState("");
return (
<div className='container'>
<Header className='header' />
<Body className='body' city={city} flag={flag}/>
<Footer className='footer' setCity={setCity} setFlag={setFlag}/>
</div>
);
}
function Footer({setCity}, {setFlag}){
return(
<div className='footer'>
Footer
<Searchbar className='searchbar' setCity={setCity} setFlag={setFlag}/>
</div>
)
}
function Searchbar({setCity}, {setFlag}){
handleChange = (e) =>{
e.preventDefault();
console.log(e.target.value);
setCity(e.target.value);
}
handleSubmit = (e) => {
e.preventDefault();
console.log("submitted");
setFlag(false);
}
return(
<div className='searchbar'>
<form>
<select …javascript reactjs react-props react-state-management react-hooks
我的单选按钮无法正常工作，最大的问题是当我单击单选项目时未设置选中的属性。
\n知道为什么它不能正常工作以及如何实现上述几点吗？
\n请参阅下面的代码片段，它在这里不起作用，不知道为什么。
\nclass Root extends React.Component {\n render() {\n return (\n <div>\n Group 1: <RadioButton />\n Group 2: <RadioButtonGroup />\n </div>\n );\n }\n}\n\nimport React, { useState } from "react"\n\ninterface SharedProps {\n /**\n * Specify whether the control is disabled\n */\n disabled?: boolean\n\n /**\n * Specify whether the <RadioButton> is currently checked\n */\n defaultChecked?: boolean\n\n /**\n * Provide where label text should be placed\n */\n labelPosition: "right" | "left"\n\n /**\n * Provide a name for …我正在使用 React-Admin 3.14，我想要一个自定义登录页面。当我使用下面的 useLogin 挂钩时，我遇到了一个与挂钩相关的错误，我无法弄清楚。
import React from 'react';
import { useLogin,useNotify } from 'react-admin';
import Button from '@material-ui/core/Button'
const LoginPage = () => {
const HandleClick = () => {
console.log('Clicked login ...');
const login = useLogin;
const notify = useNotify;
login({ username:'john', password:'doe' }).catch(() => notify("Invalid email or password"));
}
return(
<Button variant="contained" onClick={HandleClick}>Login</Button>
);
}
export default LoginPage;
UseLogin 是对 Reac-Admin 3.14 authProvider 登录方法的回调（https://marmelab.com/react-admin/doc/3.14/Authentication.html#uselogin-hook）。
我收到的错误是：错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：
为什么这个警告框在一个简单的 useReducer 应用程序中出现两次，
单击此处 获取代码和框链接，
重新生成场景
这是代码
import "./styles.css";
import { useReducer } from "react";
const reducerFunction = (state, action) => {
switch (action.type) {
case "testing": {
if (action.payload.value > 0) {
return { ...state, testing: action.payload.value };
} else {
alert("some message");
return state;
}
}
default: {
throw new Error("Invalid Action");
}
}
};
export default function App() {
const defaultValue = {
testing: 0
};
const [state, dispatch] = useReducer(reducerFunction, defaultValue);
return (
<input …我只是想知道是否可以在 useEffect 挂钩内渲染组件。我有两个组件，假设 A 和 B。在组件 A 中，我的 useEffect 挂钩如下。在测试钩子内的某些条件时，我想渲染组件 B。
export default function A() {
const [location, setlocation] = usestate(null);
useEffect(() => {
if (condition) {
<B />; // it does not render anything though
} else {
//code
}
}, [location]);
}
export default function B() {
const test = () => {
console.log("testing");
};
return (
<View style={styles.container}>
<Button title={"Click Me"} onPress={test} />
</View>
);
}
我注意到，如果我使用用作 useState 初始值设定项的新值重新渲染组件，则返回的值将从之前的渲染中缓存，而不是用新值替换。我怎样才能避免这种行为？
最小的例子：
import React, { useState } from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return <Test />;
}
}
ReactDOM.render(<App />, document.getElementById("container"));
function Test() {
const [val, setVal] = useState();
setTimeout(() => {
setVal(5);
}, 1000);
return <Cached value={val}></Cached>;
}
function Cached({ value }) {
console.log({ value });
const [val] = useState(value || "cached");
console.log({ val });
return <p>{val}</p>;
}
https://codesandbox.io/s/react-playground-forked-1ykk3?file=/index.js
如果您检查控制台，value并且val有不同的值，我希望它们是相同的。但 UI 只打印"cached"
我正在为 axios (React Native) 设置全局标头，因此我需要从 redux 存储中获取令牌。但是当我尝试获取它时，它会抛出错误：无效的挂钩调用
任何解决方法或解决方案都会有很大帮助！
import { useSelector } from 'react-redux';
let authToken;
function getToken() {
authToken = useSelector(state => state?.authReducer?.authToken);
return;
} getToken();
这是与自定义挂钩一起使用的错误模式吗？
我传入一个数组，然后循环该数组以确定将显示哪些组件。
import React from "react";
import { Image, Paragraph, Header } from "../../components/Blocks";
export const useBlocks = (blocks) => {
const items = blocks.map((item: Item) => {
switch (item.name) {
case "image":
return <Image key={item.order} data={item.data} />;
case "paragraph":
return <Paragraph key={item.order} data={item.data} />;
case "heading":
return <Header key={item.order} data={item.data} />;
default:
return null;
}
});
return items;
};
知道为什么这个带有 SWR 的自定义钩子会导致无限循环吗？
export const useOrganization = () => {
const [data, setData] = useState<OrganizationModel | undefined>();
const { organizationId } = useParams();
const { data: dataSWR } = useSWRImmutable<
AxiosResponse<Omit<OrganizationModel, 'id'>>
>(`organizations/${organizationId}`, api);
useEffect(() => {
if (dataSWR?.data && organizationId) {
setData({ id: organizationId, ...dataSWR.data });
console.log({ id: organizationId, ...dataSWR.data });
}
});
return data;
};
我需要从 API 获取数据并从 URL 参数添加缺少的 id。如果我使用 setData(dataSWR.data)，一切都很好。当使用 setData({...dataSWR.data}) -> 循环时会出现问题。
react-hooks ×10
reactjs ×10
javascript ×4
react-native ×2
alert ×1
expo ×1
next.js ×1
react-admin ×1
react-props ×1
react-redux ×1
storybook ×1
swr ×1
typescript ×1
use-reducer ×1