我正在使用react挂钩动态地渲染数据。我正在执行两件事:
a。从组件的历史记录道具中获取URL参数。
b。从组件的历史道具中获取状态数据,该数据返回给我一系列对象,例如:
current_data: Array(2)
0: {registration_data: {…}, company_name: "Test"}
1: {registration_data: {…}, company_name: "Sample"}
lastIndex: (...)
lastItem: (...)
length: 2
__proto__: Array(0)
我需要实现的是,从current_data
对象中呈现出与我的URL查询参数匹配的数据。我正在使用for loop
遍历我的数组。我知道这是一个菜鸟问题,但是有点想得到想要的输出。
import React, {useState, useEffect} from 'react';
const ViewRegistrations = (props) => {
const [queryParam, setParam] = useState('');
useEffect(() => {
const queryParam = new URLSearchParams(props.location.search).get('registration');
setParam(queryParam);
})
const [dataRecieved, setData] = useState( [] );
useEffect(() => {
const data = props.location.state.current_data;
// const testData
for(var i = 0; i< data.length; i++){
console.log(data[i] === queryParam)
}
});
return (
<div>
{}
</div>
)
}
export default ViewRegistrations;
语句console.log(data[i] === queryParam)
每次都返回布尔值。我希望与查询参数匹配的数组数据以dataRecieved
状态存储。请帮助解决此问题。
您的问题的一种解决方案如下1.首先在组件的安装位置上获得所需的queryParam(我也不确定您对useState挂钩的使用,第二个变量应该是第一个添加了'set'的变量),如下所示:
const [queryParam, setQueryParam] = useState('');
useEffect(() => {
const query = new URLSearchParams(props.location.search).get('registration');
setQuery(query);
}, []) // don't forget to add an empty dependency array so it runs only once
第二,然后您与另一个useEffect进行匹配的条件
useEffect(() => {
const data = props.location.state.current_data;
if (data && queryParam)
for(var i = 0; i< data.length; i++){
data[i] === queryParam ? setDataReceived([...dataReceived, data[i]);
}
}, [queryParam])
最后,您可以根据需要进行显示,您可以使用组件中的map来实现此目的,例如
{dataReceived.length && dataReceived.map((data) => <whatever>data</whatever>)}
我不是100%肯定这是一个可行的版本,也许应该进行一些调整,但这会给您一个想法