首页 > 解决方案 > 如何访问范围外的forLoop数据

问题描述

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()函数内部,我正在迭代数据并将值保存在result使用 push 方法调用的数组中。

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

那么,访问函数result外部值的正确方法是什么search()

标签: javascriptreactjs

解决方案


您需要将其 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)
  }

推荐阅读