javascript - 通过对象搜索后响应组件的更新状态
问题描述
我有一个从 reactIcons npm 包https://www.npmjs.com/package/react-icons输出的对象我正在使用 sanity studio从其中一个文件夹中导入所有内容import * as ReactIcons from 'react-icons/fa'
,我创建了一个文本输入搜索到的值并运行一个搜索函数,该函数对我从 reactIconsfa
文件夹中获取的对象的值运行包含,并记录匹配的值。现在我想获取这些值并使用useState()
Howerver 更新反应组件我收到以下错误Uncaught ReferenceError: setIcon is not defined
,并且 SetIcon 是 useState 数组中的 setter 函数。到目前为止,这是我的代码
import React, { useState } from 'react';
import PropTypes from 'prop-types'
import FormField from 'part:@sanity/components/formfields/default'
import PatchEvent, {set, unset} from 'part:@sanity/form-builder/patch-event'
import * as ReactIcons from 'react-icons/fa'
console.log(ReactIcons);
const createPatchFrom = value => PatchEvent.from(value === '' ? unset() : set(String(value)))
const Example = value => {
const [icon, setIcon] = useState();
return (
<div>{icon}</div>
);
}
const search = value => {
console.log(value);
Object.keys(ReactIcons).map(go => {
if (go.toLowerCase().includes(value) === true){
console.log(go);
setIcon(go);
}
})
}
class IconPickerCustom extends React.Component{
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func.isRequired
};
render = () =>{
const {type, value, onChange} = this.props
return (
<>
<FormField label={type.title} description={type.description}>
<input
type="text"
value={value === undefined ? '' : value}
onChange={event => onChange(createPatchFrom(event.target.value))}
ref={element => this._inputElement = element}
/>
</FormField>
<input
type="text"
onChange={event => search(event.target.value)}
/>
{Object.values(ReactIcons).map(X =>{
return (
<>
<X/>
</>
);
})}
{console.log(ReactIcons.Fa500Px)}
<ReactIcons.Fa500Px/>
<Example/>
</>
)
}
}
export default IconPickerCustom;
解决方案
React 有两类组件,类组件和函数组件(以前称为无状态组件)。当您意识到需要在函数组件中使用状态并且不想将其转换为类组件时,会在函数组件中使用钩子。
useState() Hook 允许我们在函数组件中添加状态。
类组件
//initialize state
constructor(props) {
super(props);
this.state = {foo: bar};
}
//set state
this.setState({foo: baz});
//read state
this.state.foo;
函数组件
(带有 useState() Hook)
//initialize state
const [icon, setIcon] = useState("myInitialValue");
//set state
setIcon("myNewValue");
//read state
{icon}
话虽如此,你已经有了一个类组件,所以这里不需要使用钩子。
class IconPickerCustom extends React.Component{
constructor(props) {
super(props);
this.state = { icon: "nothing" };
}
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func.isRequired
};
const createPatchFrom = value => PatchEvent.from(value === '' ? unset() : set(String(value)));
const search = value => {
Object.keys(ReactIcons).map(go =>
({ go.toLowerCase().includes(value) ?
this.setState({icon:go}) : null;})
}
render = () =>{
const {type, value, onChange} = this.props
return (
<>
<FormField label={type.title} description={type.description}>
<input
type="text"
value={value === undefined ? '' : value}
onChange={event => onChange(createPatchFrom(event.target.value))}
ref={element => this._inputElement = element}
/>
</FormField>
<input
type="text"
onChange={event => search(event.target.value)}
/>
{Object.values(ReactIcons).map(X =>{
return (
<>
<X/>
</>
);
})}
{console.log(ReactIcons.Fa500Px)}
<ReactIcons.Fa500Px/>
<Example/>
</>
)
}
}
export default IconPickerCustom;
你会想要一些类似的东西。如果您有任何问题,请告诉我。
推荐阅读
- debugging - 如何可视化 Elasticsearch 执行的查询历史
- python - 如何在 pandas read_csv 中设置千位分隔符?
- modelica - matrix singular under determined linear system not solvable
- amazon-web-services - 如何为自定义 cloudwatch 指标使用多个单独的维度?
- python - How to extract useful info from cProfile with Pandas and Numpy?
- r - 3D trajectory visualization with path in R
- java - Arcore - Frame keeps UpdatedTrackables after removing anchor
- javascript - 在 Google Apps 脚本中,如何让单个函数迭代跟踪许多不同变量对的数据结构?
- powershell - Literal Find and replace exact match. Ignore regex
- marklogic - op:and 与多个 op:where 子句