映射到 useState 对象

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，一个永远不会改变的函数（我假设）