Проблема переключения внешнего ключа в имя в React.js и Django
У меня есть модель Game
с 2 внешними ключами away_team
и home_team
, оба приходят из модели Club
. Я получил данные из них, отрендеренные из API в React.js следующим образом:
const AllGames = () => {
//Simplified Game object
const [games, setGames] = useState([{
away_score:"",
away_team:"",
home_score:"",
home_team:"",
id:''
}]);
//Simplified Club object
const [clubs, setClubs] = useState([{
name:'',
id:""
}])
useEffect(() => {
loadAllGames();
},[])
useEffect(() => {
loadAllClubs();
}, [games])
const loadAllClubs = () => {
getAllClubs()
.then((data) => {
setClubs(data)
})
.catch((error) => console.log(error))
}
const loadAllGames = () => {
getAllGames()
.then((data) => {
setGames(data)
})
.catch((error) => console.log(error))
};
С этим куском кода все загружается гладко, проблема в том, когда я пытаюсь вывести данные:
return (
<Base>
{games.map((game) => {
return (
<p>
Home) {game.home_team}: {game.home_score} Away){game.away_team}: {game.away_score}
</p>
)
})}
</Base>
)
}
export default AllGames;
Вывод выглядит как Home) 1: 34 Away) 2: 51
Выводит id клуба вместо названия. Я знаю, что была функция для переключения game.home_team
и game.away_team
с идентификаторов на имена (ака: текстовые переменные типа "Пример названия команды")
TLDR; Мне нужно поменять home_team
или away_team
в списке объектов игры на name
из списка объектов клуба с совпадающим id, что-то вроде if games[1].home_team
=== clubs[1].id
then games[1].home_team
= clubs[1].name
Вы должны определить поле метода сериализатора в вашем сериализаторе django. пример
class GameSerializer(serializers.ModelSerializer):
name=serializers.SerializerMethodField(read_only=True)
class Meta:
model = Property
fields =[
"name",
#add othe game properties
]
def get_name(self,obj):
return obj.home_team.name