javascript - 如何访问范围外的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()
?
解决方案
您需要将其 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)
}
推荐阅读
- powershell - PowerShell 中的 wlanapi.dll。禁用后台扫描
- javascript - Google Apps 脚本 - 从电子表格创建日历事件
- c - 启动线程使主线程超时,但允许主线程暂停计时器
- java - 如何为自定义 Quarkus ConfigProperties 使用配置映射
- python - 我可以假设 boto3 'describe_instance_status response' 永远不会是部分的吗?更具体地说,关于“InstanceStatus”属性
- php - 虽然 m 没有将数据导出到 excel 网格线
- javascript - 处理嵌套组件时如何停止触发“单击”事件
- asp.net-core - 使用 reverseProxy 重定向到 signin-oidc 后的 Identity Server 4 显示“message.State 为 null 或为空”。
- macos - 打开终端时找不到命令,可能是 conda 问题?
- javascript - 固定表格标题不与列对齐