你能使用功能部件吗?可能会简化一点。

import React, { useState, useEffect } from "react";
import { Button } from "@material-ui/core";

interface Props {
    names: string[];
}

export const NameCarousel: React.FC<Props> = ({ names }) => {
  const [currentNameIndex, setCurrentNameIndex] = useState(0);

  const name = names[currentNameIndex].toUpperCase();

  useEffect(() => {
    setCurrentNameIndex(0);
  }, names);

  const handleButtonClick = () => {
    setCurrentIndex((currentNameIndex + 1) % names.length);
  }

  return (
    <div>
      {name}
      <Button onClick={handleButtonClick}>Next</Button>
    </div>
  )
};

useEffect componentDidUpdate 其中,它将把依赖项数组(状态和属性变量)作为第二个参数。当这些变量发生变化时,执行第一个参数中的函数。就这么简单。您可以在函数体内部进行额外的逻辑检查来设置变量(例如。, setCurrentNameIndex ).

只要小心,如果第二个参数中有一个依赖项在函数内部发生了更改,那么您将有无限的重新呈现器。

看看 useEffect docs

正如我在评论中所说,我不喜欢这些解决方案。

组件不应该关心父级正在做什么或当前正在做什么 state 对于父母,他们应该简单地接受 props JSX ,这样它们才是真正可重用的、可组合的和独立的,这也使得测试更加容易。

我们可以 NamesCarousel 组件将旋转木马的名称、旋转木马的功能和当前可见的名称放在一起,并生成一个 Name 道具

重置 selectedIndex useEffect 将项作为依赖项,但如果只将项添加到数组的末尾,则可以忽略此部分

const Name = ({ name }) => <span>{name.toUpperCase()}</span>;

const NamesCarousel = ({ names }) => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  useEffect(() => {
    setSelectedIndex(0)
  }, [names])// when names changes reset selectedIndex

  const next = () => {
    setSelectedIndex(prevIndex => prevIndex + 1);
  };

  const prev = () => {
    setSelectedIndex(prevIndex => prevIndex - 1);
  };

  return (
    <div>
      <button onClick={prev} disabled={selectedIndex === 0}>
        Prev
      </button>
      <Name name={names[selectedIndex]} />
      <button onClick={next} disabled={selectedIndex === names.length - 1}>
        Next
      </button>
    </div>
  );
};

这很好,但是 可重复使用的?不,那个 组件只是 Carousel 与 姓名 组件。

那么,我们该怎么做才能使它真正地可重用,并看到独立设计组件的好处呢 ?

render props 图案。

让我们做一个通用的 组件,它将获取 items 然后调用 children 函数传入选定的 item

const Carousel = ({ items, children }) => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  useEffect(() => {
    setSelectedIndex(0)
  }, [items])// when items changes reset selectedIndex

  const next = () => {
    setSelectedIndex(prevIndex => prevIndex + 1);
  };

  const prev = () => {
    setSelectedIndex(prevIndex => prevIndex - 1);
  };

  return (
    <div>
      <button onClick={prev} disabled={selectedIndex === 0}>
        Prev
      </button>
      {children(items[selectedIndex])}
      <button onClick={next} disabled={selectedIndex === items.length - 1}>
        Next
      </button>
    </div>
  );
};

现在这个模式给了我们什么?

它使我们能够

// items can be an array of any shape you like
// and the children of the component will be a function 
// that will return the select item
<Carousel items={["Hi", "There", "Buddy"]}>
  {name => <Name name={name} />} // You can render any component here
</Carousel>

现在它们都是独立的,而且是真正可重用的,你可以通过了 作为图像、视频甚至用户的数组。

return (
  <div>
    {children(items.slice(selectedIndex, selectedIndex + props.numOfItems))}
  </div>
)

// And now you will get an array of 2 names when you render the component
<Carousel items={["Hi", "There", "Buddy"]} numOfItems={2}>
  {names => names.map(name => <Name key={name} name={name} />)}
</Carousel>

你问什么是最好的选择,最好的选择是使它成为一个受控的组件。

组件在层次结构中的位置太低,不知道如何处理它的属性更改—如果列表更改了,但只是稍微改变了(可能添加了一个新名称),调用组件可能希望保持原来的位置。

在所有情况下,如果父组件可以决定组件在提供新列表时的行为方式,那么我们的情况会更好。

如果你真的坚持不让它成为受控组件,还有其他选择:

• 您可以将整个名称(或id组件)保持在状态,而不是索引,如果名称列表中不再存在该名称,则返回列表中的第一个名称。这与您最初的需求稍有不同,对于一个非常长的列表来说,这可能是一个性能问题,但它非常清晰。
• 如果你对钩子没问题的话 useEffect
• 用类来做这件事的“规范”方式似乎是 getDerivedStateFromProps -是的,这意味着在状态中保留对名单的引用并进行比较。如果你这样写的话,它看起来会更好一些:

   static getDerivedStateFromProps(props: Props, state: State = {}): Partial<State> {

       if( state.names !== props.names){
           return {
               currentNameIndex: 0,
               names: props.names
           }
       }

       return null; // you can return null to signify no change.
   }

state.names

但真正控制的组件是一种方法,你可能迟早都会这样做,当需求发生变化时,父对象需要知道所选的项。