我知道我们可以使用 react 类方法轻松做到这一点。因为我们有 this.ref。但我不确定如何在功能组件中使用 useRef 钩子来做到这一点。
使用这里写的技巧
这就是我试图做到这一点的方式。
...
const inputEl1 = useRef(null);
const inputEl2 = useRef(null);
return (
<Field
name="first_name"
component={MyTextInput}
placeholder="First name"
ref={inputEl1}
refField={inputEl1}
onEnter={() => {
inputEl2.current.focus();
}}
/>
/>
<Field
name="last_name"
placeholder="Last name"
component={MyTextInput}
ref={inputEl2}
refField={inputEl2}
/>
)
...
所以我需要将 ref from field 传递给 MyTextInput 并且在 nextKeyPress 上我想关注第二个输入组件，即 inputEl2
// 我的文本输入
...
render() {
const {
input: { value, onChange, onBlur },
meta: { touched, error },
keyboardType,
placeholder,
secureTextEntry,
editable,
selectTextOnFocus,
style,
selectable, …我有这个代码
const subTotal = orderInfo.details.reduce((acc, cv) => acc += Number(cv.price) * Number(cv.quantity), 0);
我想为此行写两个护航，no-return-assign 和no-param- ressign
我这样尝试：
/* eslint-disable-next-line no-return-assign eslint-disable-next-line no-param-reassign */
const subTotal = orderInfo.details.reduce((acc, cv) => acc += Number(cv.price) * Number(cv.quantity), 0);
但我的编辑器仍显示eslint（no-return-assign）皮棉错误
我正在使用useEffect钩子，并使用函数getStoreUsers通过fetch调用获取用户数据列表，该函数对响应调度一个操作，并将shopUsers（这是一个数组）存储在redux存储中。
在数组依赖中，我正在写[shopUsers]。我不知道为什么它会导致无限渲染。
这是我使用useEffect挂钩的方式：
useEffect(() => {
const { getStoreUsers, shopUsers } = props;
setLoading(true);
getStoreUsers().then(() => {
setLoading(false);
}).catch(() => {
setLoading(false);
});
}, [shopUsers]);
我只想在shopUsers数组中的数据更改时才重新渲染组件。
如果我在数组依赖项中编写shopUsers.length。它停止重新渲染。
但是，假设我有一个页面，当用户单击userList并在下一页更新用户数据时，该页面打开。更新之后，我希望用户返回到以前未卸载的相同组件。因此，在这种情况下，数组长度保持不变，但是数组索引中的数据将更新。因此，在这种情况下，shopUsers.length不起作用。
javascript ×2
react-hooks ×2
react-native ×2
reactjs ×2
eslint ×1
eslintrc ×1
redux ×1
redux-form ×1
textinput ×1