【发布时间】：2022-10-06 19:21:05
【问题描述】：
我想使用反应状态创建一个搜索字段。我创建了相关组件并在控制台中看到了过滤后的输出。但我无法获得对主页的更改。你能帮忙吗？
search.js 文件
我可以在控制台中看到我在此文件中过滤的对象，但无法将其发送到主页
import { useQuery } from \'@apollo/client\';
import React, { useState } from \'react\';
import { GET_CHARACTER } from \'./queries\';
function Search() {
const setSearchBtn = e => {
e.preventDefault();
};
const [searchFilter, setSearchFilter] = useState(\'\');
const { loading, error, data } = useQuery(GET_CHARACTER, {
variables: {
characterName: searchFilter,
},
});
return (
<div>
<form
className={`${styles.search} d-flex flex-sm-row flex-column align-items-center justify-content-center gap-4 mb-5`}
>
<input
onChange={e => setSearchFilter(e.target.value)}
placeholder=\"Search for characters\"
className={styles.input}
type=\"text\"
/>
<button
onClick={setSearchBtn}
className={`${styles.btn} btn btn-primary fs-5`}
>
Search
</button>
</form>
</div>
);
}
询问
import { gql } from \'@apollo/client\';
export const GET_CHARACTER = gql`
query getCharacterWithName($characterName: String) {
characters(filter: { name: $characterName }) {
results {
id
name
status
species
type
gender
origin {
name
}
location {
name
}
image
}
}
}
`;
-
请将您的代码添加为代码块而不是屏幕截图
标签： reactjs graphql react-state