Javascript 那里'；这是React中搜索和分页的错误

我正在React中创建我的站点，并创建了分页和搜索。当我在网站上搜索某个内容时，它只在之后我转到另一个页面时才起作用。我认为这是因为软件和分页在同一个组件中

然后我尝试提升状态，但我得到了一个错误：React Minified error#31

以下是分页组件：

const Paginator=({
总计，//记录总数
起始页=1，
totalPages=null，
onMovePage=null，
}) => {
...
返回(
...
{range（1，totalPages+1）.map（p=>(
{setCurrentPage（p）；onMovePage&&onMovePage（{currentPage:p}}}}title={p}name={p}/>
))}
...
);
};

以下是软件组件：

const软件=（{search}）=>{
const[软件，集合软件]=useState（[]）；
const[total，setTotal]=useState（null）；
const[totalPages，setTotalPages]=useState（null）；
const[valid，setValid]=useState（false）；
const fetchData=async（{currentPage}）=>{
const SEARCH=SEARCH？`？SEARCH=${SEARCH}`:''；
const CURRENT_PAGE=currentPage&&SEARCH==“”？`？PAGE=${currentPage}`:“”；
const response=等待获取(`http://127.0.0.1:8000/api/software/${CURRENT_PAGE}${SEARCH}`）；
const data=wait response.json（）；
成套软件（数据、结果）；
setTotal（data.count）；
setTotalPages（数据总页数）；
setValid（true）；
}
useffect（（）=>{
获取数据（{currentPage:1}）；
}, []);
返回(
{
有效的&&
{softwares.map（s=>(
))}
}
);
};

标题组件中的SearchForm：

const头=（{handleChange，handleClick}）=>{
返回(
...
...
);
};
const SearchForm=（{style，handleChange，handleClick}）=>{
返回(
进入
);
};
常量搜索按钮=（{onClick}）=>{
返回(
);
};

和部分应用程序内搜索组件：

const-App=（）=>{
...
//搜寻
const[search，setSearch]=useState（“”）；
const[shouldFetch，setShouldFetch]=useState（false）；
常数handleChange=（e）=>{
设置搜索（如目标值）；
}
useffect（（）=>{
if（shouldFetch）{
（异步（）=>{
const response=等待获取(`http://127.0.0.1:8000/api/software/?search=${search}`）；
const data=wait response.json（）；
setShouldFetch（false）；
})()
}
}，[shouldFetch]）；
const handleClick=（）=>setShouldFetch（true）；
返回(
...
} />
{/*实际上我想在这里使用Paginator，但是
抛出错误：React Minified error#31*/}
...
);
}

---

那么，如何做到这一点呢？

问题在于您的

useffect

依赖关系（或缺乏依赖关系）

以下是代码的相关部分：

const Softwares = ({ search }) => {

  const [softwares, setSoftwares] = useState([]);
  const [total, setTotal] = useState(null);
  const [totalPages, setTotalPages] = useState(null);
  const [valid, setValid] = useState(false);

  const fetchData = async ({ currentPage }) => {

    const SEARCH = search ? `?search=${search}` : '';
    const CURRENT_PAGE = currentPage && SEARCH === '' ? `?page=${currentPage}` : '';

    const response = await fetch(`http://127.0.0.1:8000/api/software/${CURRENT_PAGE}${SEARCH}`);

    const data = await response.json();

    setSoftwares(data.results);
    setTotal(data.count);
    setTotalPages(data.total_pages);
    setValid(true);

  }

  useEffect(() => {
    fetchData({ currentPage: 1 });
  }, []);

空的依赖项数组意味着您正在运行在组件装载时调用

fetchData

一次的效果。单击

Pagination

组件将直接调用

fetchData

函数。对

search

的更改不会导致

fetchData

重新运行。数据取决于

搜索

，因此

搜索

应该是一个依赖项

在这个组件中，

fetchData

函数很好。我建议提升的状态是将

当前页面

从

分页

提升到

软件

。

onMovePage

回调只能更新

currentPage

状态。这样，您可以仅通过效果调用

fetchData

，并在

search

或

currentPage

更改时运行效果

const Softwares = ({ search }) => {

  const [softwares, setSoftwares] = useState([]);
  const [total, setTotal] = useState(null);
  const [totalPages, setTotalPages] = useState(null);
  const [valid, setValid] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    // defining the function inside of the useEffect
    // lets eslint exhaustive dependency checks work their magic
    const fetchData = async () => {

      const SEARCH = search ? `?search=${search}` : '';
      const CURRENT_PAGE = currentPage && SEARCH === '' ? `?page=${currentPage}` : '';
  
      const response = await fetch(`http://127.0.0.1:8000/api/software/${CURRENT_PAGE}${SEARCH}`);
  
      const data = await response.json();
  
      setSoftwares(data.results);
      setTotal(data.count);
      setTotalPages(data.total_pages);
      setValid(true);
    }
  
    // need to define and call in separate steps when using async functions
    fetchData();

  }, [currentPage, search]);

  return (
    ...
        <Paginator page={currentPage} totalPages={totalPages} total={total} onMovePage={setCurrentPage} />
    ...
  );
};

const软件=（{search}）=>{
const[软件，集合软件]=useState（[]）；
const[total，setTotal]=useState（null）；
const[totalPages，setTotalPages]=useState（null）；
const[valid，setValid]=useState（false）；
const[currentPage，setCurrentPage]=useState（1）；
useffect（（）=>{
//在useEffect中定义函数
//让eslint彻底的依赖性检查发挥作用
const fetchData=async（）=>{
const SEARCH=SEARCH？`？SEARCH=${SEARCH}`:''；
const CURRENT_PAGE=currentPage&&SEARCH==“”？`？PAGE=${currentPage}`:“”；
const response=等待获取(`http://127.0.0.1:8000/api/software/${CURRENT_PAGE}${SEARCH}`）；
const data=wait response.json（）；
成套软件（数据、结果）；
setTotal（data.count）；
setTotalPages（数据总页数）；
setValid（true）；
}
//使用异步函数时，需要在单独的步骤中定义和调用
fetchData（）；
}，[currentPage，search]）；
返回(
...
...
);
};

成功了！谢谢！！