如何在 React 中组织获取的数据

Question

我从 firebase 获取了这些数据：

{-M1pSe35WgpDekyV1A6_:{cword':"শ্বশুর", wword: "শশুর"}},
{-M1pSoUng04mDi7rImUT:{cword: "শাশুড়ী", wword: "শ্বাশুড়ি"}},
{-M1pSyZ1FgiuKKjA8p2h:{cword: "ব্রাহ্মনবাড়িয়া",wword: "ব্রাম্মনবাড়ীয়া"}},
{-M1pTB2ktY8A3hk4mati:{cword: "স্টুডিও", wword: "ষ্টুডিও"}}

使用 Object.values 后的样子：

 [
{cword':"শ্বশুর", wword: "শশুর"},
{cword: "শাশুড়ী", wword: "শ্বাশুড়ি"},
{cword: "ব্রাহ্মনবাড়িয়া",wword: "ব্রাম্মনবাড়ীয়া"},
{cword: "স্টুডিও", wword: "ষ্টুডিও"}
]

现在我想将数组用作 array[0].cword, array[1].cword。

但是当我分配 const somthing = array[0].cword 时，它说 cword 未定义。 **这是我获取数据的组件：**

import React,{useState, useEffect} from 'react';
import Button from '../UI/Button/Button';
import Input from '../UI/Input/Input';
import axios from '../../axios';

import './CheckWord.css';

const CheckWord = ({}) => {
  const [state, setState] = useState({
    data: '',
    cWord:''
  });
  useEffect(()=>{
    const fetchedData = async ()=>{
      const result = await axios.get('/words.json',);
      setState({data: Object.values(result.data)});
    }
    fetchedData();
  },[]);
  // Here I want to use the state.data like **let nword = state.data[0].cword or state.data[1].cword** 
  // Submit Change Handler 
  const submitChangeHandler = (e)=>{
      e.preventDefault();
  }
  return(
    <div className='CheckWord'>
      <h4>শব্দ</h4>
      <form className='Form' onSubmit={submitChangeHandler}>
        <Input pholder='উপরের শব্দটি লিখুন' />
        <Button btnName='Submit'/>
      </form>
    </div>
  )
}

export default CheckWord;

cword 属性的连续使用方法是什么？例如：array[0].cword、array[1].cword 或任何其他方式。

Answer 1

作为state={data:[...]}，您可以通过数组访问mapping的值

    const state={
      data: [
        {cword:"শ্বশুর", wword: "শশুর"},
        {cword: "শাশুড়ী", wword: "শ্বাশুড়ি"},
        {cword: "ব্রাহ্মনবাড়িয়া",wword: "ব্রাম্মনবাড়ীয়া"},
        {cword: "স্টুডিও", wword: "ষ্টুডিও"}
      ]
    }

  state.data&&state.data.map(obj=>{
        console.log(obj.cword)
    })