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()
的值的正确方法是什么?
答案 0 :(得分: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)
}
答案 1 :(得分:0)
你需要确保在搜索方法自己执行之前不会使用结果,你可以尝试让搜索方法返回结果数组,并且在执行函数搜索之前不要做任何console.log>