Reactjs 重构React类组件到Functional，如何在useEffect（）中使用action creator

我试图将一个类组件重构为功能组件，但我不相信在

useffect（）

中使用动作创建者而不是

componentDidMount（）

。本质上，我的linter不喜欢我没有将

props

传递到

useffect（）

的第二个参数，但是如果我这样做，那么组件将无限地重新渲染。对于类似的问题，我已经找到了很多答案，但他们大多只是说，在这种情况下，忽略门楣是可以的

然而，我想知道的是，这是否是真正最好的方法——不是什么会起作用，或者如何忽略门楣，而是我应该在一个完美的世界里做什么来达到同样的效果。我相当肯定，忽略门楣并不是最好的答案，但我也是一个新的反应者，所以我很可能遗漏了一些明显的东西

这是我的类组件：

class StreamDelete extends React.Component {

    componentDidMount() {
        this.props.fetchStream(this.props.match.params.id);
    }

    render() {
        return (
            <div>{this.props.stream.title}</div>
        );
    }
    
};

const mapStateToProps = (state, ownProps) => {
    return { stream: state.streams[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchStream })(StreamDelete);

const StreamDelete = props => {

    useEffect(() => {
        props.fetchStream(props.match.params.id);
    }, []) // I've tried passing in props here, but then the component re-renders itself infinitely

    return (
        <div>{props.stream.title}</div>
    );
};

const mapStateToProps = (state, ownProps) => {
    return {stream: state.streams[ownProps.match.params.id]}
}

export default connect(mapStateToProps, { fetchStream })(StreamDelete);

---

以下方面应起作用：

const id = props.match.params.id;
const { fetchStream } = props;
useEffect(() => {
  fetchStream(id);
}, [fetchStream, id]);

---

如果你有一根短绒，你可以检查一下

谢谢，这很有意义！我猜这种方式只有在fetchStream函数或id发生更改时才需要重新渲染，这是不应该发生的——而在它发生更改之前，如果任何道具发生了更改，则需要重新渲染。这或多或少是对的吗？@Jul是的，fetchStream不应该改变，但它是为了满足linter的需要而添加的。

const id = props.match.params.id;
const { fetchStream } = props;
useEffect(() => {
  fetchStream(id);
}, [fetchStream, id]);