React native：useSelector redux 为空

Question

我是新手，我想使用 React Native 创建 android 应用程序，所以在创建项目后我安装了 redux 和 redux thunk 并进行了 redux 想要工作的每个配置。

我创建了一个动作文件：

export const GETSURVEYOR = 'GETSURVEYOR';

const URL = "http://192.168.1.6:3000/";

export const fetchSurveyor = () => {
    return async dispatch => {
        const controller = new AbortController();
        const timeout = setTimeout(
            () => { controller.abort(); },
            10000,
        );
        const response = await fetch(`${URL}GetSurveyorList`,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({}),
                signal: controller.signal
            });
        clearTimeout(timeout);
        const resData = await response.json();

        dispatch({
            type: GETSURVEYOR,
            surveyorList: resData.SurveyorList
        });
    }
}

之后我创建了 reducer 来处理这些数据：

import {GETSURVEYOR} from '../actions/surveyor'

const initialState = {
    surveyorList: []
}

export default (state = initialState, action) => {
    switch (action.type) {
        case GETSURVEYOR:
            return {
                ...state,
                surveyorList: action.surveyorList
            };

现在我正在使用来自 'react-redux 的 useSelector, useDispatch .

import React, { useState, useEffect, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import * as surveyorActions from '../store/actions/surveyor';

export default () => {
    const [surveyorCount, setSurveyorCount] = useState(0);
    const survayers = useSelector(state => state.surveyor.surveyorList);
    const dispatch = useDispatch();


    const loadSurvayer = useCallback(async () => {
        await dispatch(surveyorActions.fetchSurveyor());
        console.log('run use Callback');
        console.log('returned :', survayers );
        // setSurveyorCount(survayers.length);
    }, [dispatch]);

    useEffect(() => {
        loadSurvayer();
    }, [dispatch]);

    return [loadSurvayer, surveyorCount];
}

第一次呈现此分页时，当然 survayers 是空的，但在获取数据并将状态设置为 reducer 后，survayers 螺母为空。但我还是空着？我确信数据是从服务中获取的，但我从 survayers ?

中得到了空

LOG  Running "RNAuditMngm" with {"rootTag":1}
 LOG  run use Callback
 LOG  returned : []
 LOG  run use Callback
 LOG  returned : []

如果我将 useEffect 代码更改为：

useEffect(() => {
    loadSurvayer();
}, [dispatch,survayers]);

我循环了!!!!我如何在没有循环的情况下更改代码？

Answer 1

在 useSelector 中，您不应该像这样阅读 surveyerList state.surveyorList 吗？。你所在的州没有任何名为 surveyor 的对象，但你目前正在阅读 state.surveyor.surveyorList

Answer 2

我认为一切正常，但您没有在正确的地方使用 console.log。当您运行 loadSurvayer 时，survayers 为空。它甚至第二次还是空的，因为您没有将它作为 useEffect 挂钩中的依赖项传递。就像你说的，如果你将它作为依赖项传递，那么它会导致无限循环，这是正确的，因为每当 survayers 更改时，该函数将被再次调用，依此类推。

因此，您必须执行以下操作：

从 useEffect 挂钩中删除 dispatch 依赖项。
在 loadSurvayer 函数之外更改 console.log。
从 dispatch 调用中删除 await，因为它是同步的。

以下是修改代码以使其正常工作的方法：

import React, { useState, useEffect, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import * as surveyorActions from '../store/actions/surveyor';

export default () => {
    const [surveyorCount, setSurveyorCount] = useState(0);
    const survayers = useSelector(state => state.surveyor.surveyorList);
    const dispatch = useDispatch();


    const loadSurvayer = useCallback(async () => {
        dispatch(surveyorActions.fetchSurveyor()); // Remove the `await`
        console.log('run use Callback');
        // setSurveyorCount(survayers.length);
    }, [dispatch]);

    useEffect(() => {
        loadSurvayer();
    }, []); // <-- remove the `dispatch` from here.

    console.log('returned :', survayers ); // <-- Move the console log here

    return [loadSurvayer, surveyorCount];
}

改进奖励和建议：删除 surveyorCount 状态变量，因为您实际上并不需要它，因为您可以直接 return 计数。

import React, { useState, useEffect, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import * as surveyorActions from '../store/actions/surveyor';

export default () => {
    // Remove the `surveyorCount`
    //const [surveyorCount, setSurveyorCount] = useState(0);
    const survayers = useSelector(state => state.surveyor.surveyorList);
    const dispatch = useDispatch();


    const loadSurvayer = useCallback(async () => {
        dispatch(surveyorActions.fetchSurveyor()); // Remove the `await`
        console.log('run use Callback');
        // setSurveyorCount(survayers.length);
    }, [dispatch]);

    useEffect(() => {
        loadSurvayer();
    }, []); // <-- remove the `dispatch` from here.

    console.log('returned :', survayers ); // <-- Move the console log here

    //return [loadSurvayer, surveyorCount];
    return [loadSurvayer, survayers.length]; // <-- Use `survayers.length` instead of `surveyorCount`
}

React native：useSelector redux 为空

React native: useSelector redux is empty

react-native

react-redux

react-native-android