【React】検索後にページ移動すると検索後のデータが正しく表示されない

# はじめに
タイトルの通りの事象と遭遇したので、簡単にまとめてみたいと思います。

# 修正前

```jsx:
    const [data, setData] = useState([]);
    const [viewData, setViewData] = useState([])
    const [pageNum, pageNumSet] = useState(1);
    const [maxNum, maxNumSet] = useState(0);
    const inputSearchElement = useRef(null);
    const MAX_DATA_VIEW = 10

  function searchData(e) {
    const search_text = e.target.value
    let searched_data = data
    if (search_text) {
      searched_data = searched_data.filter((data) => (data.name.includes(search_text)))
    }
    setViewData((searched_data.slice((pageNum - 1) * MAX_DATA_VIEW, pageNum * MAX_DATA_VIEW)))
    maxNumSet(Math.ceil(searched_data.length /MAX_DATA_VIEW))
    pageNumSet(1)
  }

  function movePage(target) {
    let targetNum = 1
    if (target === 'next') {
      targetNum = pageNum + 1
    } else if (target === 'prev') {
      targetNum = pageNum - 1
    } else if (!isNaN(target)) {
      targetNum = Number(target)
    }
    // ページ番号に応じてデータを抽出
    const viewData = data.slice((targetNum - 1) * MAX_DATA_VIEW, targetNum * MAX_DATA_VIEW)
    setViewData(viewData)
    pageNumSet(targetNum)
  }

  <input type="text" placeholder="検索" ref={inputSearchElement} 
                     onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        searchData(e);
                      }}}
                      onChange={searchData}
                      >
  </input>
```

# 原因
- movePageで検索前のデータを使用していたこと
これにより検索後にページ移動すると検索後のデータでなく、検索前のデータを表示してしまっていました

# 解決方法
ページ移動時に表示するデータを切り替えることにしました。検索している場合は検索後のデータを扱い、そうでない場合は検索前のデータを扱います。そのためには検索有無のフラグとデータの2つをstate管理すれば良さそうです。

# 修正後

```diff_jsx
const [data, setData] = useState([]);
const [viewData, setViewData] = useState([])
const [pageNum, pageNumSet] = useState(1);
const [maxNum, maxNumSet] = useState(0);
+   const [search_text, setSearchText] = useState('');
+   const [searchedData, setSearchedData] = useState([])
const inputSearchElement = useRef(null);
const MAX_DATA_VIEW = 10

function searchData(e) {
  const search_text = e.target.value;
  // 検索フラグ 
+   setSearchText(search_text);
  let searched_data = data;
  if (search_text) {
    searched_data = searched_data.filter((data) => (data.name.includes(search_text)))
  }
+   setSearchedData(searched_data);
-   setViewData((searched_data.slice((pageNum - 1) * MAX_DATA_VIEW, pageNum * MAX_DATA_VIEW)))
  // 検索後、ページを1にリセットするため表示するデータ数は固定
  setViewData(searched_data.slice(0, MAX_DATA_VIEW));
  maxNumSet(Math.ceil(searched_data.length / MAX_DATA_VIEW));
  pageNumSet(1);
  }

function movePage(target) {
  let targetNum = 1
  if (target === 'next') {
    targetNum = pageNum + 1
  } else if (target === 'prev') {
    targetNum = pageNum - 1
  } else if (!isNaN(target)) {
    targetNum = Number(target)
  }
  // ページを移動する際に表示するデータを判定
+ const dataToDisplay = search_text ? searchedData : data;
  // ページ番号に応じてデータを抽出
  const viewData = dataToDisplay.slice((targetNum - 1) * MAX_DATA_VIEW, targetNum * MAX_DATA_VIEW);
  setViewData(viewData);
  pageNumSet(targetNum);
  }

<input type="text" placeholder="検索" ref={inputSearchElement} 
                 onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    searchData(e);
                  }}}
                  onChange={searchData}
                  >
</input>
```