React Native — состояние возвращает значение null после установки состояния
Я очень новичок в том, чтобы реагировать на родные, в настоящее время я создаю небольшое приложение, чтобы просто получить представление об этом. У меня возникла проблема с отображением данных из API. Это ответ json, возвращаемый API
{"data":[{"digit":300,"countsum":"52"},{"digit":301,"countsum":"102"},{"digit":302,"countsum":"27"},{"digit":303,"countsum":"201"},{"digit":500,"countsum":"101"}]}
Когда я попытался сопоставить эти данные, я столкнулся с некоторыми проблемами. Я сохранил ответ от API на состояние, и когда я попытался отобразить данные состояния с помощью функции map, он показывает, что значение состояния равно нулю. Этот код я пробовал до сих пор
const [listdata, setListData] = useState(null)
useEffect(() => {
// Run! Like go get some data from an API.
getListData();
}, []);
const getListData = async () => {
const token = await AsyncStorage.getItem("@userToken")
axios
.get(constants.BASE_URL + "getlist?token = " +token)
.then(response => setListData(response.data))
.catch(error => {
console.info(error);
});
listdata.map(item => <Text>{item.digit}</Text>)
}
@Sakshi setListData(ответ.данные)
Попробуйте console.info listdata на этом этапе, вы обнаружите, что он по-прежнему равен нулю, другими словами, значение обновленного значения listdata:useSate будет готово после выполнения рендеринга. Вы можете сделать другую функцию вне текущей. затем используйте useEffect со списком данных, чтобы обновить текстовые представления.
Ответы 5
Вам нужно дождаться выполнения выборки, а затем выполнить карту списка.
// wait for it
await axios
.get(constants.BASE_URL + "getlist?token = " +token)
.then(response => setListData(response.data))
.catch(error => {
console.info(error);
});
listdata.map(item => <Text>{item.digit}</Text>)
Тем не менее он показывает Uncaught (в обещании) TypeError: listdata is null
Вы должны использовать его следующим образом: useState([]) // пустой массив
Если вы хотите сопоставить данные, сделайте это внутри оператора возврата вашего кода, например:
return(
{listData?listdata.map(item => return <Text>{item.digit}</Text>):""}
);
Делай это так,
export default function ComponentName () {
const [listdata, setListData] = useState([])
useEffect(() => {
// Run! Like go get some data from an API.
getListData();
}, []);
const getListData = async () => {
const token = await AsyncStorage.getItem("@userToken")
axios
.get(constants.BASE_URL + "getlist?token = " +token)
.then(response => setListData(response.data))
.catch(error => {
console.info(error);
});
}
return (<>
listdata.map(item => <Text>{item.digit}</Text>)
</>
);
}
Это образец значения в моем комментарии выше:
Попробуйте console.info listdata на этом этапе, вы обнаружите, что он все еще null, другими словами, значение обновленного значения listdata:useSate будет готов после рендеринга. Ты можешь сделать другую функцию вне текущей. затем используйте useEffect со списком данных для обновления ваших текстовых представлений
const [listdata, setListData] = useState(null)
useEffect(() => makeRemoteRequest(), [listdata])
makeRemoteRequest = () => {
const url = `your-url-of-data-here`;
fetch(url)
.then(res => res.json())
.then(res => {
setListData(res.data);
})
.catch(error => {
console.info(error)
});
};
Вы можете попробовать следующее:
const [listdata, setListData] = useState([])
useEffect(() => {
// Run! Like go get some data from an API.
getListData();
}, []);
const getListData = async () => {
const token = await AsyncStorage.getItem("@userToken")
try {
const dataResponse = await axios.get(constants.BASE_URL + "getlist?token = " +token);
setListData(dataResponse.data || [] );
} catch(error) {
console.info(error);
}
}
return (<>
listdata.map(item => <Text>{item.digit}</Text>)
</>);
я не вижу, где вы храните данные в
listData?