useState не инициирует получение данных при первом рендеринге - PullRequest
Новая
       68

useState не инициирует получение данных при первом рендеринге

1 голос
/ 05 мая 2020

когда этот компонент загружен, функция выборки должна извлекать данные и сохранять их в хранилище с помощью редуктора. Когда я использую useSelector для выбора этих данных и инициализации этого значения с помощью useState, оно не обновляется при первом рендеринге. я хочу, чтобы данные были получены и сохранены с помощью useState. любезно помогите мне сохранить полученные данные с помощью useState в переменной состояния, чтобы полученные данные инициализировались при первом рендеринге. 

import { useDispatch, useSelector } from 'react-redux';
import { fetchQA } from '../../store/actions/qp';
import ListQA from '../../components/ListQA';

const QAScreen = props =>{
    subjectId = props.route.params.subjectId;

   const dispatch = useDispatch()



       // fetching the data using dispatch

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

    const selectedQuestions = useSelector(state => state.qa.questionAndAnswers);

    **const [userTestDetails,setUserTestDetails] = useState(selectedQuestions);**



    return(<View>
        <Text> welcome to QA Screen</Text>
        <FlatList   **data={userTestDetails}** // not updating on initial render
                    keyExtractor={item=>item.questionId}
                    renderItem={itemData => <ListQA data={itemData.item} index={itemData.index} />}
        />
    </View>
    )
}

1 Ответ

0 голосов
/ 05 мая 2020

Вам не нужно сохранять данные, полученные из redux, в состояние, вы можете напрямую использовать это значение, если не хотите выполнять некоторые локальные манипуляции. 

const QAScreen = props =>{
    subjectId = props.route.params.subjectId;

   const dispatch = useDispatch()



       // fetching the data using dispatch

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

    const userTestDetails = useSelector(state => state.qa.questionAndAnswers);





    return(<View>
        <Text> welcome to QA Screen</Text>
        <FlatList   data={userTestDetails}
                    keyExtractor={item=>item.questionId}
                    renderItem={itemData => <ListQA data={itemData.item} index={itemData.index} />}
        />
    </View>
    )
}

Также, поскольку вы отправляете действие, которое выбирает и обновляет данные в редукторе, это правильно, что у вас не будет данных сразу, если вы вообще используете sh для обновления состояния, вам нужно использовать useEffect

const QAScreen = props =>{
    subjectId = props.route.params.subjectId;

   const dispatch = useDispatch()



       // fetching the data using dispatch

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

    const selectedQuestions = useSelector(state => state.qa.questionAndAnswers);
    const [userTestDetails,setUserTestDetails] = useState(selectedQuestions);
    useEffect(() => {
          setUserTestDetails(userTestDetails);
    }, [selectedQuestions]);



    ...
}
...