Question

function App() {
  const [data, setData] = useState([])
  const [day, setDay] = useState()
  const [time, setTime] = useState()
  let result = []


  //Getting data from backend using axios 

  useEffect(() => {
    axios.get("http://localhost:5000/data")
      .then(function (response) {
        setData(response.data.slice(1))
      })
      .catch(function (error) {
        console.error(error);
      })
  }, [])

  function search(e) {
    e.preventDefault()
    for (let i = 0; i < data.length; i++) {
      if ((time == data[i][1])) {
         result.push(data[i])
      }
    }
  }
  
console.log(result)

  return (
    <div className='layout'>
      <div className='navbar'><a href='#'>Home</a></div>
      <div className="wrap">

        <form onSubmit={search}>        

          <label for="time">Select Time</label>
          <select id="time" name="time" onChange={(e) => setTime(e.target.value)}>
            <option>Select Time</option>
            <option value="8am - 6pm">8am - 6pm</option>
            <option value="10am - 9pm">10am - 9pm</option>
            <option value="9am - 10pm">9am - 10pm</option>
          </select>

          <button type='submit'>Submit</button>
        </form>
      </div>

    </div>
  );
}

在上面的反应应用程序中，我使用 axios 从后端获取数据并将其保存到名为 data 的反应状态中，它是数组形式，如下所示：

0: Array(8) [ "Honey Baked Ham Company LLC, The", "10am - 9pm", "sun,mon", … ]

1: Array(8) [ "Ranch 616", "9am - 10pm", "sat,sun", … ]

2: Array(8) [ "Austin Oaks Hospital", "9am - 10pm", "sun,mon", … ]

3: Array(8) [ "MN - Carnicerias Lafogata", "9am - 10pm", "tue,thu", … ]

4: Array(8) [ "Whitney's Magical Treats", "9am - 10pm", "tue,thu", … ]

5: Array(8) [ "Papadom", "10am - 9pm", "tue,thu", … ]

也在 search() 函数中，我正在迭代数据并使用 push 方法将值保存在名为 result 的数组中。

在 console.log(result) 函数外执行 search() 时，我得到的输出为 empty array 可能是因为 console.log(result) 语句在 result.push() 之前运行search() 函数内的语句。

那么，在 result 函数之外访问 search() 的值的正确方法是什么？

Answer 1

您需要将 result 作为状态变量

const [result, setResult] = useState()

那么，

search(e)=> {
    e.preventDefault()
    const arr=[]
    for (let i = 0; i < data.length; i++) {
      if ((time == data[i][1])) {
         arr.push(data[i])
      }
    }
   setResult(arr)
  }

Answer 2

你需要确保在搜索方法自己执行之前不会使用结果，你可以尝试让搜索方法返回结果数组，并且在执行函数搜索之前不要做任何console.log

如何访问范围外的forLoop数据

2 个答案: