ReactJS

Question

ReactJS - 我实现了二进制搜索功能，它只在第一次工作，但在我更改输入框中的值后，它总是 return -1 即使它在数组中有值。

请看下面代码：

import React, { useState } from 'react'
import { Container } from 'react-bootstrap'

const binarysearch = () => {
  const [ insertValue, setInsertValue ] = useState(0)
  var exarr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
  // Binary Search
  const binarySearch = (arr, val) => {
    let start = 0, end = arr.length - 1

    while (start <= end) {
      let mid = Math.floor((start + end)/2)
      console.log(mid)
      if (arr[mid] === val) {
        return mid
      }

      if (val < arr[mid]) {
        end = mid - 1
      } else {
        start = mid + 1
      }
    }
    return -1
  }
  // End Binary Search

  return (
    <div>
      <br />
      <hr />
      <Container>
        <h1>Binary Search</h1>
        <h4>Array = {JSON.stringify(exarr)}</h4>
        <h4>Search <input type="number" onChange={e => setInsertValue(e.target.value)} /></h4>
        <h3>Search {insertValue}, Result in location: {binarySearch(exarr,insertValue)}</h3>
      </Container>
      <hr />
    </div>
  )
}

export default binarysearch

首次加载更改输入后（搜索 10 它应该 return 10 但 -1）

Answer 1

非常感谢@Mario Vernari

我更新了以下行以将字符串更改为数字，它可以正常工作。（将“+”插入 insertValue）

来自

<h3>Search {insertValue}, Result in location: {binarySearch(exarr,insertValue)}</h3>

到

<h3>Search {insertValue}, Result in location: {binarySearch(exarr, +insertValue)}</h3>

Answer 2

问题在于 e.target.value 始终是一个字符串，即使输入 type 属性设置为 "number"。

因此，当您执行 arr[mid] === val 时，它将始终是 false，因为这是将数字与字符串进行比较。

您可以看到此行为 here。

要解决此问题，请执行 onChange={e => setInsertValue(Number(e.target.value))}。

或者，您也可以使用非严格相等比较（实际上并不推荐），只需将 === 运算符替换为 ==.

ReactJS - 我实现了二进制搜索功能，它只在第一次运行

ReactJS - I implement Binary Search Function, it works only first time

binary-search