在对jsx的提取调用中共享数据

Question

所以我正在构建一个项目

作为其中的一部分，我执行一个提取调用，并console.log响应。

​

import React, { useState, useEffect } from 'react';

import Downshift from 'downshift'


export default function TestSearchBar() {
  const [pokemonData, setPokemonData] = useState(null);

  useEffect(() => {
    Pokemons();

    async function Pokemons() {
      const res = await fetch(
        `http://localhost:3001/pokemon/names`
      );
      const data = await res.json();
      setPokemonData(data);
    }

  }, []);
  const items = pokemonData;
  return (
    <div>
      <Downshift
        onChange={selection =>
          fetch(`http://localhost:3001/search/${selection.value}`).then(res => res.json()).then(data => console.log(data))
        }
        itemToString={item => (item ? item.value : '')}
      >
        {({
          getInputProps,
          getItemProps,
          getLabelProps,
          getMenuProps,
          isOpen,
          inputValue,
          highlightedIndex,
          selectedItem,
          getRootProps,
        }) => (
          <div>
            <label {...getLabelProps()}>Enter a pokemon </label>
            <div
              style={{ display: 'inline-block' }}
              {...getRootProps({}, { suppressRefError: true })}
            >
              <input {...getInputProps()} />
            </div>
            <ul {...getMenuProps()}>
              {isOpen

                ? items

                  .filter(item => !inputValue || item.value.includes(inputValue))
                  .map((item, index) => (
                    <li
                      {...getItemProps({
                        key: item.value,
                        index,
                        item,
                        style: {
                          backgroundColor:
                            highlightedIndex === index ? 'lightgray' : 'white',
                          fontWeight: selectedItem === item ? 'bold' : 'normal',
                        },
                      })}
                    >
                      {item.value}
                    </li>
                  ))
                : null}
            </ul>

<p></p>


          </div>
        )}
        
      </Downshift>,


    

    </div>
  );
}

​

我希望将进入控制台的数据插入到jsx中，并让它返回类似的内容

​

<div>
pokemon name {data.name}
pokemon stats {data.stats} 
</div>

​

我想不出如何共享我获取的数据，并将其放到控制台中，然后放到jsx中

Answer 1

将提取逻辑移动到另一个具有选择值依赖性的效果中。因此，当选择改变时，口袋妖怪将被重取。然后打印到控制台并更新组件的状态。如下所示：

const [selection, setSelection] = useState();
const [pokemon, setPokemon] = useState();

useEffect(() => {
  const fetchPokemon = async () => {
     const pokemon = await ...         
     console.log(pokemon);
     setPokemon(pokemon);
  }
  if (selection) {
    fetchPokemon();
  }
}, [selection])

<Downshift onChange={selection => setSelection(selection.value)} ...

{pokemon && <div>
  pokemon name {pokemon.name}
  pokemon stats {pokemon.stats} 
</div>}

Answer 2

我注意到的第一件事是，useEffect中的依赖数组是空的，并且正在更新其中的状态。这会导致无限的呈现循环，这可能就是为什么在屏幕上看不到任何东西的原因。

    useEffect(() => {
    Pokemons();

    async function Pokemons() {
      const res = await fetch(
        `http://localhost:3001/pokemon/names`
      );
      const data = await res.json();
      setPokemonData(data);
    }
// Change here: 
  }, [pokemonData]);