Question

我正在努力寻找一种将密钥传递给return语句的根div的方法

  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("chicken");

  useEffect(() => {
      getRecipes();
    }, [query]);

  const getRecipes = async () => {
      const response = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${App_ID}&app_key=${App_Key}`);
      const data = await response.json();
      setRecipes(data.hits);
      console.log(data.hits);
  }

  const updateSearch = e => {
    setSearch(e.target.value);
    console.log(search);
  };

  const getSearch = e => {
    e.preventDefault();
    setQuery(search);
    setSearch("")
  };


  return(
      <div className="App">
          <form onSubmit={getSearch} className="search-form">
           <input 
           className="search-bar" 
           type="text" value={search} 
           onChange={updateSearch}
           placeholder="Find a recipe" />
             <button className="search-button" type="submit">
             Search
             </button>
          </form>
          <div className="recipes">
          {recipes.map(recipe => (
            <Recipe
            title={recipe.recipe.label} 
            calories={Math.round(recipe.recipe.calories)}
            image={recipe.recipe.image}
            ingredients={recipe.recipe.ingredients}/>
            ))}
          </div>
      </div>
    );

当我仅将密钥传递给Recipe组件时，会出现错误“列表中的每个孩子都应具有唯一的“ key”属性。”

我认为这意味着我需要将密钥传递给className为“ App”的div。如何在不将map函数传递到整个返回语句的情况下做到这一点？

Answer 1

在封闭的div上不需要键。您只需要在要重复的节点上使用密钥，并且应确保该密钥在所有项目中都是唯一的。

数据条目通常具有ID字段。如果您有一个，并且它是唯一的，则应该将其用作密钥：

environment(fun))

如果不这样做，则可以依靠索引：

pip install kivy[base] kivy_examples --pre --extra-index-url https://kivy.org/downloads/simple/

将此选项用作最后的选择。如果物品的顺序改变，React可能无法重复使用物品，这可能会影响性能。

注意：var arr = [1, 2, 3, 4, 5] arr.splice(4, 1) console.log(arr);是React用来了解哪些元素已更改以及如何更新它们的特殊属性。 React管理{recipes.map(recipe => ( <Recipe key={recipie.recipe.id} title={recipe.recipe.label} calories={Math.round(recipe.recipe.calories)} image={recipe.recipe.image} ingredients={recipe.recipe.ingredients} /> ))}道具，您的组件实现无需为此做任何事情。创建许多相同的东西时，只需传递它即可。

您可以在此处了解有关键的更多信息：https://reactjs.org/docs/lists-and-keys.html

如何将密钥传递给根

1 个答案: