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，这个函数永远不会改变(我假设(