React TypeScript 设置选择值和状态的正确方法

Question

我正在尝试在我的 React 项目中学习使用 TypeScript。

我为传入的数据格式（名称和网址）做了一个类型。

type PokedexType = {
    name: string;
    url: string;
}

API 返回的数据是一个对象数组（带有名称和 url）。

{
"results": [
        {
            "name": "national",
            "url": "https://pokeapi.co/api/v2/pokedex/1/"
        },
        {
            "name": "kanto",
            "url": "https://pokeapi.co/api/v2/pokedex/2/"
        },
        // ...
    ];
}

在我的useEffect() 中，我将这些对象存储在setState() 的状态中。

useEffect(() => {
  api.get('/pokedex')
    .then((response) => {
      setPokedex(response.data.results);
    })
    .catch((error) => {
      console.log(error);
    });
});

由于 API 返回一个数组，我对设置 useState() 的正确方法感到困惑。

// this works
const [pokedex, setPokedex] = useState<Array<PokedexType>>([{ name: "", url: "" }]);
// these also work
const [pokedex, setPokedex] = useState<PokedexType>({ name: "", url: "" });
const [pokedex, setPokedex] = useState<Array<PokedexType>>();
const [pokedex, setPokedex] = useState(); // (with checking)

我知道指定类型是为了类型检查，但是如果状态立即被覆盖，这有关系吗？

我正在尝试将州名称 (i.name) 设置为我的选择的值，正确的方法是什么？既然 state 现在是一个数组，那么如何将值设置为相应的属性（像这样）？

<select value={pokedex.name}>

Answer 1

你不能只说pokedex.name。 pokedex 是一个数组，因此您必须遍历该数组。例如

//just a mock, will come from your ajax request
const pokedex = [
    {
        "name": "national",
        "url": "https://pokeapi.co/api/v2/pokedex/1/"
    },
    {
        "name": "kanto",
        "url": "https://pokeapi.co/api/v2/pokedex/2/"
    }
]

const Select = () => ( <select > 
      {pokedex.map(el => < option value = {el.name} >{el.name}</option>)}
</select>)


        // Render it
        ReactDOM.render( <
          Select / > ,
          document.getElementById("react")
        );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

再看看接口：

interface IPokedex {
    name: string;
    url: string;
}

const [pokedex, setPokedex] = useState<IPokedex[]>([{ name: "", url: "" }]);