javascript - 当 props 改变时，以下策略中哪一个是重置组件状态的最佳方法

Question

我有一个非常简单的组件，带有一个文本字段和一个按钮:

它接受一个列表作为输入并允许用户循环浏览该列表。

该组件具有以下代码:

import * as React from "react";
import {Button} from "@material-ui/core";

interface Props {
    names: string[]
}
interface State {
    currentNameIndex: number
}

export class NameCarousel extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = { currentNameIndex: 0}
    }

    render() {
        const name = this.props.names[this.state.currentNameIndex].toUpperCase()
        return (
            <div>
                {name}
                <Button onClick={this.nextName.bind(this)}>Next</Button>
            </div>
        )
    }

    private nextName(): void {
        this.setState( (state, props) => {
            return {
                currentNameIndex: (state.currentNameIndex + 1) % props.names.length
            }
        })
    }
}

这个组件工作得很好，除了我还没有处理状态改变时的情况。状态发生变化，我想将 currentNameIndex 重置为零。

最好的方法是什么？

<小时/>

我考虑过的选项:

使用componentDidUpdate

这个解决方案很笨拙，因为 componentDidUpdate 在渲染之后运行，所以我需要添加一个子句在组件处于无效状态时，在渲染方法中“不执行任何操作”，如果我不小心，我可以导致空指针异常。

我在下面包含了这个的实现。

使用getDerivedStateFromProps

getDerivedStateFromProps 方法是静态，签名仅允许您访问当前状态和下一个 Prop 。这是一个问题，因为你无法判断 props 是否已更改。作为结果，这迫使您将 Prop 复制到状态中，以便您可以检查它们是否相同。

使组件“完全受控”

我不想这样做。该组件应该私有(private)地拥有当前选择的索引。

使组件“完全不受 key 控制”

我正在考虑这种方法，但不喜欢它如何导致家长需要了解 child 的实现细节。

Link

<小时/>

其他

我花了很多时间阅读You Probably Don't Need Derived State但我对那里提出的解决方案非常不满意。

我知道这个问题的变体已经被问过多次，但我不认为任何答案都会权衡可能的解决方案。一些重复的例子:

• How to reset state in a component on prop change
• Update component state when props change
  • Updating state on props change in React Form

<小时/>

附录

使用componetDidUpdate的解决方案(参见上面的描述)

import * as React from "react";
import {Button} from "@material-ui/core";

interface Props {
    names: string[]
}
interface State {
    currentNameIndex: number
}

export class NameCarousel extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = { currentNameIndex: 0}
    }

    render() {

        if(this.state.currentNameIndex >= this.props.names.length){
            return "Cannot render the component - after compoonentDidUpdate runs, everything will be fixed"
        }

        const name = this.props.names[this.state.currentNameIndex].toUpperCase()
        return (
            <div>
                {name}
                <Button onClick={this.nextName.bind(this)}>Next</Button>
            </div>
        )
    }

    private nextName(): void {
        this.setState( (state, props) => {
            return {
                currentNameIndex: (state.currentNameIndex + 1) % props.names.length
            }
        })
    }

    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void {
        if(prevProps.names !== this.props.names){
            this.setState({
                currentNameIndex: 0
            })
        }
    }

}

使用getDerivedStateFromProps的解决方案:

import * as React from "react";
import {Button} from "@material-ui/core";

interface Props {
    names: string[]
}
interface State {
    currentNameIndex: number
    copyOfProps?: Props
}

export class NameCarousel extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = { currentNameIndex: 0}
    }

    render() {

        const name = this.props.names[this.state.currentNameIndex].toUpperCase()
        return (
            <div>
                {name}
                <Button onClick={this.nextName.bind(this)}>Next</Button>
            </div>
        )
    }


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

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

        return {
            copyOfProps: props
        }
    }

    private nextName(): void {
        this.setState( (state, props) => {
            return {
                currentNameIndex: (state.currentNameIndex + 1) % props.names.length
            }
        })
    }


}

Answer 1

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

组件不应该关心父级正在做什么或者父级当前的state是什么，它们应该简单地接收props并输出一些JSX，这样它们就真正可重用、可组合和隔离，这也使测试变得更加容易。

我们可以使 NamesCarousel 组件将轮播的名称以及轮播的功能和当前可见名称一起保存，并创建一个仅执行一项操作的 Name 组件thing，显示通过 props 传入的名称

要在项目更改时重置 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>
  );
};

现在这很好，但是 NamesCarousel 可以重复使用吗？不，Name 组件只是 Carousel 与 Name 组件耦合在一起。

那么我们怎样才能使其真正可重用，并看到独立设计组件的好处？

我们可以利用render props模式。

让我们创建一个通用的Carousel组件，它将获取items的通用列表并调用传入所选的children函数项目

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>
  );
};

现在这个模式实际上给我们带来了什么？

它使我们能够像这样渲染 Carousel 组件

// 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>

现在它们都是独立的并且真正可重用，您可以将items作为图像、视频甚至用户的数组传递。

您可以更进一步，为轮播提供要显示为 Prop 的项目数量，并使用项目数组调用子函数

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>