我正在使用 ReactHooks。我正在尝试访问功能中ref的User组件useEffect。但是我得到了elRef.current价值null，虽然我elRef.current作为第二个参数传递给useEffect. 但我想得到对div元素的引用。但在 之外（函数体）useEffect，ref值是可用的。这是为什么 ？我怎样才能得到elRef.current里面的价值useEffect？
代码
import React, { Component, useState, useRef, useEffect } from "react";
const useFetch = url => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(
() => {
setIsLoading(true);
fetch(url)
.then(response => {
if (!response.ok) throw Error(response.statusText);
return response.json();
})
.then(json => { …更新的问题：
如果我在滚动之前在输入字段中输入某些内容，则expanded道具将设置为 true - 正确
如果我向下滚动 - 展开设置为 false - 正确
如果我现在在输入字段中输入expanded内容仍然是false- 我希望再次expanded设置为true。
代码：
export default () => {
const [expanded, setExpanded] = useState(true)
let searchInput = React.createRef()
let scrollTopValue = 0;
function handleSearchInput() {
console.log(Boolean(searchInput.current.value.length))
setExpanded(Boolean(searchInput.current.value.length)) // first time true, don't get re triggered
}
useEffect(() => {
window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, []);
function handleScroll() {
setExpanded(scrollTopValue > document.documentElement.scrollTop)
scrollTopValue = document.documentElement.scrollTop
}
return ( …我正在建造一个 <BasicForm>组件，用于在我的应用程序中构建表单。它应该处理提交、验证并且还应该跟踪输入状态（如触摸、脏等）。
因此，它需要一些函数来完成所有这些，我一直想知道放置这些声明的最佳位置是什么（关于代码组织和性能优化，考虑 React 和 JavaScript 最佳实践）。
我正在使用 React 16.8 钩子并与 Webpack 捆绑。
到目前为止，这是我所拥有的：
基本表单.js
/* I moved those validating functions to a different file
because I thought they are helpers and not directly related
to my BasicForm functionality */
import { validateText, validatePassword, validateEmail } from './Parts/ValidationHelpers';
function BasicForm(props) {
const [inputs, setInputs] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
// These are functions to handle these events
function onChange(event) {...}
function onBlur(event) {...}
function onFocus(event) {...}
// …我正在使用带有钩子的 react-redux，我需要一个选择器，它采用的参数不是 prop。该文件指出
选择器函数不接收 ownProps 参数。但是，可以通过闭包（参见下面的示例）或使用柯里化选择器来使用 props。
但是，他们没有提供示例。如文档中所述，咖喱的正确方法是什么？
这就是我所做的，它似乎有效，但这是对的吗？从函数返回函数是否有影响useSelector（它似乎永远不会重新渲染？）
// selectors
export const getTodoById = state => id => {
let t = state.todo.byId[id];
// add display name to todo object
return { ...t, display: getFancyDisplayName(t) };
};
const getFancyDisplayName = t => `${t.id}: ${t.title}`;
// example component
const TodoComponent = () => {
// get id from react-router in URL
const id = match.params.id && decodeURIComponent(match.params.id);
const todo = useSelector(getTodoById)(id);
return <span>todo.display</span>;
}
我即将开始一个使用 React-Redux 的项目。对于 API 参考，有 Hooks 和 connect()。因为，钩子是连接 API 的替代品。使用钩子或连接到我的 React-Redux 项目有什么区别。
使用 Hooks/Functional 组件在 React 中优化和使代码更具可读性的更好方法是什么？每个组件有一个 setState 钩子还是多个？
为了扩展我的问题，请考虑以下内容：
使用钩子，我们可以使用多个状态，以某种方式更方便地拆分特定用途的状态（例如，一种状态用于用户数据，另一种用于保存加载标志，另一种用于为 API 检索的数据等） . 在我的第一步中，我确信最好的方法是每个我想要管理的数据都有多个状态……但是，一段时间后，当我想要时，我开始遇到多个状态之间的同步问题更新/读取效果函数中的多个状态（useEffect）。
所以，我开始相信使用 Hooks 管理状态的最佳方法它只有一个使用对象的状态并从这里管理我的所有数据......就像类组件......
const [data, setData] = useState({
retrieveData: false,
apiData: [],
userInfo: [],
showModal: false
})
// To update:
setData(oldData => {
return { ...oldData, showModal: true }
})
// Or:
setData({ ...data, retrieveData: true })
在我看来，最好有一个状态，但这可能会以某种我没有考虑的方式影响性能/可读性？
每次我在 data prop 中获取新数据但组件在我调用之前不会重新渲染 handlePanelSelection()
function StepPanel({ data, getTranslations }) {
const [panelsData, changePanel] = useState(data);
function handlePanelSelection(panelId) {
switch (panelId) {
case 8:
changePanel(getTranslations.NeeSubCategory);
break;
default:
changePanel(data);
break;
}
}
return (
<>
{panelsData.map(details => {
const imgsrc = requireContext('./' + details.image);
return (
<div key={details.id} className="block-list">
<div className="left-block">
<img src={imgsrc} alt="" />
</div>
<div className="right-block">
<h3>{details.title}</h3>
<p>{details.description}</p>
<label htmlFor="radio1" className="radio-btn">
<input
type="radio"
onClick={() => handlePanelSelection(details.id)}
name="radio1"
/>
<span></span>
</label>
</div>
</div>
);
})}
</>
);
}
但是当我像下面一样取下钩子时它就起作用了
function …提前致谢。我有一个如下的状态数组。
我需要向状态数组添加一个项目，我发现我们不需要进行状态突变。我如何使用 prevState 设置状态。
const [messages, setMessages] = React.useState(
[
{
_id: 12,
createdAt: new Date(),
text: 'All good',
user: {
_id: 1,
name: 'Sian Pol',
}
},
{
_id: 21,
createdAt: "2019-11-10 22:21",
text: 'Hello user',
user: {
_id: 2,
name: 'User New'
}
}]
)
我如何调用 set State 来附加这个状态数组。
像这样的东西？
setMessages(previousState => ({...stat
任何人都可以帮助我获得上述行代码。
我正在使用 React Router hooks 进行导航useHistory。
导航： history.push("/home", { update: true });
在家里：我正在尝试获取参数 let {update} = useParams();
但update始终未定义。这段代码有什么问题。有什么建议 ？
我有一个应用程序，我在其中使用 3 Context Provider。要使应用程序正常工作，我必须将 <App/>所有这些providers. 随着我的应用程序的增长，我希望有更多的提供程序来处理我必须连接的更多类型的数据。我已经开始觉得可能有更好的方法将提供者传递到<App />.
我的App.js代码：
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import { Provider as BlogProvider} from './src/context/BlogContext';
import { Provider as VehicleProvider} from './src/context/VehicleContext';
import { Provider as AuthProvider} from './src/context/AuthContext';
import IndexScreen from './src/screens/IndexScreen';
import ShowScreen from './src/screens/ShowScreen';
import CreateScreen from './src/screens/CreateScreen';
import EditScreen from './src/screens/EditScreen';
import VehicleScreen from './src/screens/VehicleScreen';
const navigator = createStackNavigator(
{
Index: IndexScreen, …react-hooks ×10
reactjs ×10
javascript ×4
react-native ×2
react-redux ×2
redux ×1
setstate ×1
typescript ×1
use-context ×1