Javascript 使用两个不同的useState钩子来存储数组和过滤数组以传递给组件是否正确？

我目前正在将我的口袋妖怪项目移植到React，因为几周前我刚刚学习了React的基础知识，我想看看我能如何适应它。现在，我构建代码的方式是使用两个不同的useState钩子，一个用于从PokeAPI获取的原始数组，并且只设置一次。这个原始数组也被传递到my form对象中，该对象根据一些表单元素（如口袋妖怪类型或口袋妖怪名称）对其进行过滤。另一个useState钩子用于跟踪filteredList，这是使用

Array.map（）

函数呈现给网站的内容

  const [pokemonList, setPokemonList] = useState([]);
  const [filteredList, setPokemonFilteredList] = useState([]);

这是我们获取和设置状态的

useffect（）

钩子

  useEffect(() => {
    const getPokemon = async () => {
      const list = await fetchPokemon();
      setPokemonList(list);
      setPokemonFilteredList(list);
    };

最后，

pokemonList

状态变量和

setPokemonFilteredList

方法被传递到

---

因此，正如我的问题标题所示，我使用两种不同的

useState（）

“正确”吗？子组件访问pokemonList变量的方式可能不同？但我相信这可能是一种反模式。

我将以几种不同的方式重构它：

将过滤器状态保留在父组件中，子组件将在这些更改时通知它

放弃

useState

，它在依赖项每次更改时都会计算一个值

函数组件（）{
const[filters，setFilters]=useState（{}）；
const[pokemons，setPokemons]=useState（[]）；
使用效果(
() => {
const list=wait fetchPokemon（）；
设置口袋妖怪（列表）；
},
[]
);
//每当'filters'或'pokemons'发生更改时，都会运行此操作。
const filteredPokemons=useMoom(
() => {
返回pokemons.filter（（pokemon）=>{
//执行您可能有的任何过滤逻辑，
//基于子组件设置的过滤器。
if（filters.name）{
返回pokemon.name.includes（filters.name）；
}
//等等。。。
});
},
[过滤器，口袋妖怪]
);
返回(
);
}

我将以几种不同的方式重构它：

将过滤器状态保留在父组件中，子组件将在这些更改时通知它

放弃

useState

，它在依赖项每次更改时都会计算一个值

函数组件（）{
const[filters，setFilters]=useState（{}）；
const[pokemons，setPokemons]=useState（[]）；
使用效果(
() => {
const list=wait fetchPokemon（）；
设置口袋妖怪（列表）；
},
[]
);
//每当'filters'或'pokemons'发生更改时，都会运行此操作。
const filteredPokemons=useMoom(
() => {
返回pokemons.filter（（pokemon）=>{
//执行您可能有的任何过滤逻辑，
//基于子组件设置的过滤器。
if（filters.name）{
返回pokemon.name.includes（filters.name）；
}
//等等。。。
});
},
[过滤器，口袋妖怪]
);
返回(
);
}

最好不要维护重复状态，或者在本例中是派生状态，因为您可能会遇到分歧。例如，如果您的原始pokemon数据得到更新，您如何确保您的过滤数据得到更新，然后重新应用过滤器？它很快就有毛了

首选的替代方法是将原始数据和过滤器保持在状态，然后在渲染期间计算派生状态（在本例中，过滤列表）

function App() {
  const [pokemonList, setPokemonList] = useState([]);
  // Some default filter state
  const [filters, setFilters] = useState({
    types: ["any"],
    search: ""
  });

  const filteredList = pokemonList.filter((pokemon) => {
    // Filter logic here
  });

  return <PokemonSearchForm setFilters={setFilters} />
}

函数应用程序（）{
const[pokemonList，setPokemonList]=useState（[]）；
//一些默认的过滤器状态
const[filters，setFilters]=useState({
类型：[“任何”]，
搜索：“
});
const filteredList=pokemonList.filter（（pokemon）=>{
//这里是过滤逻辑
});
返回
}

最好不要维护重复状态，或者在本例中是派生状态，因为您可能会遇到分歧。例如，如果您的原始pokemon数据得到更新，您如何确保您的过滤数据得到更新，然后重新应用过滤器？它很快就有毛了

首选的替代方法是将原始数据和过滤器保持在状态，然后在渲染期间计算派生状态（在本例中，过滤列表）

function App() {
  const [pokemonList, setPokemonList] = useState([]);
  // Some default filter state
  const [filters, setFilters] = useState({
    types: ["any"],
    search: ""
  });

  const filteredList = pokemonList.filter((pokemon) => {
    // Filter logic here
  });

  return <PokemonSearchForm setFilters={setFilters} />
}

函数应用程序（）{
const[pokemonList，setPokemonList]=useState（[]）；
//一些默认的过滤器状态
const[filters，setFilters]=useState({
类型：[“任何”]，
搜索：“
});
const filteredList=pokemonList.filter（（pokemon）=>{
//这里是过滤逻辑
});
返回
}

如何应用过滤器？我的建议是保持过滤器处于状态，并在需要的地方将其应用于原始阵列。这样，您就不必维护冗余/派生状态。过滤后的数据将使用表单中填写的信息应用到我的表单组件中。下面是一个小片段：这是组件本身的图像：这是因为您希望通过渲染维护过滤器吗？我想我不明白为什么不能根据您试图向用户显示的任何视图直接在子组件中进行筛选。因此，似乎您应该将筛选信息保持在状态（例如，type、searchType、search），然后在筛选过程中进行筛选render@Alex精确地我正在写一个答案，希望这会更清楚。你如何应用过滤器？我的建议是保持过滤器处于状态，并在需要的地方将其应用于原始阵列。这样，您就不必维护冗余/派生状态。过滤后的数据将使用表单中填写的信息应用到我的表单组件中。下面是一个小片段：这是组件本身的图像：这是因为您希望通过渲染维护过滤器吗？我想我是糊涂了