Question

我试图将基于类的组件转换为功能样式。我有以下代码：

const [foo, setFoo] = useState(null);
const [roomList, setRoomList] = useState([]);
useEffect(() => {
  setRoomList(props.onFetchRooms(props.token));
}, [props]);

  let roomLists = <Spinner />;
  if (!props.loading) {
    roomLists = roomList.map(room => <Room key={room._id} roomName={room.name} />);
  }

以前我有：

class Rooms extends Component {
  state = {
    foo: null
  };

  componentDidMount() {
    this.props.onFetchRooms(this.props.token);
  }

  render() {
    let roomList = <Spinner />;
    if (!this.props.loading) {
      roomList = this.props.rooms.map(room => <Room key={room._id} roomName={room.name} />);
    }

onFetchRooms是我在mapDispatchToProps中从Redux使用的功能。并且rooms也来自mapStateToProps的Redux存储。使用上面的新代码，我得到了Cannot read property 'map' of undefined。我在做什么错了？

我也尝试过不使用状态：

useEffect(() => {
    props.onFetchRooms(props.token);
  }, [props]);

  let roomList = <Spinner />;
  if (!props.loading) {
    roomList = props.rooms.map(room => <Room key={room._id} roomName={room.name} />);
  }

但这会陷入无限循环。

Answer 1

useEffect将依赖项数组设置为[]

尝试

useEffect(() => {
    props.onFetchRooms(props.token);
  }, []);

Answer 2

我认为props对象在每次重新渲染时都会改变（这就是为什么会出现无限循环的原因）。您应该将每个变量分别声明到数组中：

const {onFetchRooms, token} = props;
useEffect(() => onFetchRooms(token), [onFetchRooms, token]);

Answer 3

似乎您可能正在像这样启动组件的“功能”版本：

const Rooms = (props) => {
    ...
}

相反，为什么不这样破坏props：

const Rooms = ({onFetchRooms, rooms, token}) => {
    ...
}

现在，您可以在useEffect依赖项数组中执行此操作：

useEffect(() => {
    onFetchRooms(token);
}, [onFetchRooms, token]);

这应该使无限循环停止发生。

注意：有时要摆脱“ React Hook useEffect缺少依赖项：'props'。要么包含它，要么删除依赖项数组。” 错误，您可以“使用”：

// eslint-disable-next-line react-hooks/exhaustive-deps

例如，如果您只想在依赖项数组中添加token，而不必担心onFetchRooms，则该函数永远不会改变（我认为）

映射到useState对象

3 个答案: