Question

我正在使用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)

我需要实现的是，从与我的URL查询参数匹配的current_data对象中渲染数据。我正在使用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状态下。请帮忙解决这个问题。

Answer 1

您的问题的一种解决方案如下 1.首先，在组件的安装位置上获得所需的queryParam（我也不确定您是否使用useState钩子，第二个变量应该是第一个添加了“ 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％肯定这是一个可行的版本，也许应该进行一些调整，但这会给您一个想法

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

1 个答案: