将存储在 React State 中的 object 转换为数组

Question

我正在尝试使用从服务器接收的数组（响应我的 GET 请求）。我成功收到它并将其存储在 dbdata.purchases 状态变量中。 console.log 将它作为数组打印给我，但它的标题是 'object'。

dbdata.purchases= (2) [1, 2]
0: 1

1: 2

length: 2

proto: Array(0)

因此，我无法访问其 [i] 元素。函数 get_rewards 中的 'content' 变量等于 '12'。

问题：如何访问dbdata.purchases数组的每个元素？

我尝试使用 Array.from() 和 Object.values 将此变量转换为数组，但这两个尝试都没有成功。这是代码：

    const Offers = () => {
    const [dbdata, setdbdata] = useState(0);
    useEffect(() => {
        let login = window.localStorage.getItem('rr_login');
        const apiUrl = 'http://localhost:5000/get_rewards?login=' + login;
        fetch(apiUrl)
          .then((response) => response.json())
          .then((data) => setdbdata(data));           
    }, [])

    function get_rewards () {
        let content =[];
        console.log('dbdata.purchases=',dbdata.purchases);
        for (var i=0; i<1;i++)  // should be 'for (var i=0; i<lenght(dbdata.purchases);i++)' but it doesn't work since dbdata.purchases is not considered an array
        {
            content.push(dbdata.purchases); // should be content.push(dbdata.purchases[i]);
        }
        return content;    
    }    
    return (
        <div>
            <h5 className="mb-3">Your purchases</h5>
            <CardDeck>
                {get_rewards()}
            </CardDeck>
        </div>
    );
}

Answer 1

首先，您需要将状态数据库数据设置为一个数组：

const [dbdata, setdbdata] = useState([]);

然后当你发出请求并设置状态后，你可以通过索引访问状态数组中的每个元素：dbdata[0]获取数组中的第一个元素。

所以你的循环是

for (var i = 0; i < 1; i++) {
content.push(dbdata[i]);
}

将存储在 React State 中的 object 转换为数组

Convert an object stored in React State to an array

arrays

reactjs

react-state