javascript - 返回根据查询参数匹配的数据

Question

我正在使用 react Hook 来动态渲染数据。我正在执行两件事:

a.从组件的历史记录中获取 URL 参数。

b.从组件的历史 Prop 中获取状态数据，该数据返回给我一个对象数组，如下所示:

current_data: Array(2)
0: {registration_data: {…}, company_name: "Test"}
1: {registration_data: {…}, company_name: "Sample"}
lastIndex: (...)
lastItem: (...)
length: 2
__proto__: Array(0)

我需要实现的是，从与我的 URL 查询参数匹配的 current_data 对象中呈现数据。我正在使用 for 循环 来迭代我的数组。我知道这是一个菜鸟问题，但有点坚持获得所需的输出。

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) 每次都会返回 bool 值。我希望与查询参数匹配的数组数据存储在 dataRecieved 状态中。请帮忙解决这个问题。

Answer 1

您的问题的一个解决方案如下 1.首先在组件的挂载上获取您想要的queryParam(我也不确定您对useState钩子(Hook)的使用情况，第二个变量应该是第一个添加了“set”的变量)，如下所示:

const [queryParam, setQueryParam] = useState('');  
useEffect(() => {
const query = new URLSearchParams(props.location.search).get('registration');
            setQueryParam(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]) : null;
  }
}, [queryParam])

最后，您可以在显示它们方面做任何您想做的事情，您可以使用组件中的 map 来实现此目的，例如

{dataReceived.length && dataReceived.map((data) => <whatever>data</whatever>)}

我不是 100% 确定这是一个工作版本，也许应该进行一些调整，但这给了你一个想法