将javascript箭头函数更改为typesctipt

格蕾廷斯。

所以我试着打字。 我所基于的初始代码是基于javascript的

const PokemonTable = () => {
  const pokemon = useStore((state) => state.pokemon);
  const filter = useStore((state) => state.filter);

  return (
    <table width="100%">
      <tbody>
        {pokemon
          .filter(({ name: { english } }) =>
            english.toLowerCase().includes(filter.toLowerCase())
          )
          .map(({ id, name: { english }, type }) => (
            <tr key={id}>
              <td>{english}</td>
              <td>{type.join(", ")}</td>
            </tr>
          ))}
      </tbody>
    </table>
  );
};

当我把它改成打字稿时,它会抛出这些错误

我试图创建一个界面,将道具传递给它

//interfaz de pokemon table
interface PkTableProps{
  id:number,
  name:Array<String>,
  type:Array<String>,
}

然后我应用了箭头函数

// pokemon table

const PokemonTable = (props : PkTableProps) => {
  const pokemon = useStore((state) => state.pokemon);
  const filter = useStore((state) => state.filter);

  return (
    <table width="100%">
      <tbody>
        {pokemon
          .filter(({ props.name : { english } }) =>
            english.toLowerCase().includes(filter.toLowerCase())
          )
          .map(({ id, props.name: { english }, props.type }) => (
            <tr key={props.id}>
              <td>{english}</td>
              <td>{props.type.join(", ")}</td>
            </tr>
          ))}
      </tbody>
    </table>
  );
};

我发现了这些新的语法错误

注:

在线 <td>{english}</td> 在箭头函数的表上。我这样做是因为我试图用英语选择每个口袋妖怪的名字。这意味着我想要它 key

这是我使用的口袋妖怪阵列的结构
https://gist.githubusercontent.com/jherr/23ae3f96cf5ac341c98cd9aa164d2fe3/raw/0658aeff401d196dece7ec6fe6c726c6adc1cc00/gistfile1.txt

这是完整的代码

import React from "react";
import "./App.css";
import create from "zustand";
// import { mountStoreDevtool } from 'simple-zustand-devtools';

const POKEMON_URL =
  "https://gist.githubusercontent.com/jherr/23ae3f96cf5ac341c98cd9aa164d2fe3/raw/f8d792f5b2cf97eaaf9f0c2119918f333e348823/pokemon.json";

// definir el tipo de mi store
type State = {
  filter: string;
  pokemon: Array<string>;
  setFilter: (filter: string) => void;
  setPokemon: (pokemon: Array<string>) => void;
};

//interfaz de pokemon table
interface PkTableProps{
  id:number,
  name:Array<String>,
  type:Array<String>,
}


//tienda de estados
const useStore = create<State>((set) => ({
  // set initial values here
  filter: "",
  pokemon: [],

  setFilter: (filter: string) =>
    set((state) => ({
      ...state,
      filter,
    })),

  setPokemon: (pokemon: Array<string>) =>
    set((state) => ({
      ...state,
      pokemon,
    })),
}));

// if (process.env.NODE_ENV === 'development') {
//   mountStoreDevtool('Store', store);
// }

//  input
const FilterInput = () => {
  const filter = useStore((state) => state.filter);
  const setFilter = useStore((state) => state.setFilter);
  return (
    <input value={filter} onChange={(evt) => setFilter(evt.target.value)} />
  );
};

// pokemon table

const PokemonTable = (props : PkTableProps) => {
  const pokemon = useStore((state) => state.pokemon);
  const filter = useStore((state) => state.filter);

  return (
    <table width="100%">
      <tbody>
        {pokemon
          .filter(({ props.name : { english } }) =>
            english.toLowerCase().includes(filter.toLowerCase())
          )
          .map(({ id, props.name: { english }, props.type }) => (
            <tr key={props.id}>
              <td>{english}</td>
              <td>{props.type.join(", ")}</td>
            </tr>
          ))}
      </tbody>
    </table>
  );
};


function App()  {
  const setPokemon = useStore((state) => state.setPokemon);
  

  //lifecycle hook every time the component renders

  React.useEffect(() => {
    fetch(POKEMON_URL)
      .then((resp) => resp.json())
      .then((pokemon) => setPokemon(pokemon));
  });

  return (
    <div className="App">
      <div>
        <FilterInput />
      
      </div>
      <h1>List of Pokemons</h1>
      <PokemonTable />
      {/* mostrar el resultado de filter */}
      {/* {filter}   */}
      {/* mostar lo que el contenido del array de la url */}
      {/* {JSON.stringify(pokemon)} */}
    </div>
  );
}

export default App;