我正在尝试在功能组件中进行API调用，该函数组件是一个反应钩子，并根据结果重新渲染组件的内容。这是代码：
调用 API 的组件-
function IntegrationDownshift() {
render(
<Paper square>
{setResults(inputValue).map(
(suggestion, index) =>
renderSuggestion({
suggestion,
index,
itemProps: getItemProps({
item:
suggestion.userFullName
}),
highlightedIndex,
selectedItem
})
)}
</Paper>
);
}
这是setResults函数：
function setResults(textInput) {
const [data, setData] = useState({ users: [] });
searchUser(textInput).then(result => {
useEffect(() => {
searchUser(textInput).then(result => {
setData(result.users);
});
}, []);
});
}
我正在尝试获取状态的数据并根据数据重新渲染我的组件。 这里searchUser调用外部 API 的操作中。
searchUser正在调用操作并成功获取数据，但我不确定为什么状态会更新 - 我收到以下错误 -
React Hook "useState" 在函数 "setResults" 中调用，它是 既不是 React 函数组件，也不是自定义的 React Hook 函数 反应钩子/钩子规则
- 作为第二个替代，我正在尝试从 searchUser 返回值并在下面的函数中访问它，仍然没有用
我是钩子的新手，任何帮助/指针都会有所帮助。
您需要将第一个字母放在大写的 setResults => SetResults
function SetResults(textInput) {
const [data, setData] = useState({ users: [] });
searchUser(textInput).then(result => {
useEffect(() => {
searchUser(textInput).then(result => {
setData(result.users);
});
}, []);
});
}
函数名称必须以大写字母开头。 所以你的函数的名字是 setResults .您必须将其更改为 SetResults。
React 功能组件名称必须以大写字母开头。如果你把setResultsSetResults，那么它会起作用。
而且 Hooks 不支持常规的 javascript 类，因此请尝试创建一个名为SetResults的其他组件。并将其包含在主要组件中
实际上 setResults 需要像这样大写
function SetResults(){...} // S capitalized here
注意：如果您不使用 react 钩子，那么您不必将函数名称的第一个字母大写，但使用 hooks 需要将函数的第一个字母大写。
这里讨论了类似的问题，
React Hook ">useState" 在函数 "app" 中调用，它既不是 React 函数组件也不是自定义 React Hook 函数
反应函数需要返回一个可渲染的 JSX 才能被识别为 React 函数。你正在使用"setResults"作为辅助函数 - 它不返回可渲染的JSX。因此，错误"React Hook "useState"在函数"setResults"中被调用，它既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks"是有意义的。
请参阅这篇关于如何使用useEffort获取数据的文章 - 作者对钩子给出了很好的解释。
https://daveceddia.com/useeffect-hook-examples/
试试这个代码
export default function IntegrationDownshift() {
const [data, setData] = useState({ users: [] });
// useEffect method is first called prior to render.
useEffect( () => {
async function searchUser() {
// This will set Data Set and trigger render method
setData(result.users);
}
searchUser();
}, [setData]);
function renderSuggestion(suggestion) {
// Pretty print the suggestion data here
return <div> {suggestion} </div>;
}
return ( <Paper square> {data.map( (suggestion, index) => {
// Render each Suggestion
return renderSuggestion( suggestion);
} )}</Paper>);
}
钩子基本上允许你在函数组件中使用状态和其他 React 类组件特性。因此，不允许在常规 JavaScript 函数中调用 Hooks。您只能在函数组件的顶层或自定义 Hook 中执行此操作。
在 Hooks 中这样思考：
- useState类似于类组件中的this.setState。
- useEffect类似于类组件中的componentDidMount和componentDidUpdate。
React 文档有一节解释了使用钩子的规则：
https://reactjs.org/docs/hooks-rules.html