我的react组件从不显示数据库中的信息

Question

我有一个小的网页应用程序显示游戏信息。

我正在使用React钩子，以便组件是现代的。

当这个组件加载时，我希望它通过axios连接到api，并获得游戏的描述。

但是当它加载时，<GameVault />里面的值总是null。

当我查看数据库时，它不是空的。如果我直接点击api，它会返回游戏描述。

由于某种原因，我的console.log被击中两次。第一次为空，第二次为所需值。

我也没有得到任何错误，所以我不知道为什么这不能工作。

代码如下:

const Vault = ({ game }) => {
const [gameText, setGameText] = useState(null);
async function fetchGameText() {
const response = await axios.get(`/api/gamermag/${game.id}/gameDescriptionText`);
setGameText(response.data);
}
useEffect(() => {
fetchGameText();
}, []);

console.log("gameText: ", gameText);
const gamerValue = useMemo(() => {
return gameText ? gameText : "";
}, [gameText]);

return (
<GameVault value={gamerValue} />
)
}
export default Vault;

有办法让这个工作吗?

谢谢!

Answer 1

您需要等待从服务器加载数据。在获取数据时，gameText将为null，当它完成获取时，它将存储响应。这就是为什么你的console.log击中两次。第一次是组件的第一次渲染，第二次是gameText改变其状态导致渲染的时候。

需要添加等待数据的逻辑。

if(!gameText){
return <div>loading...</div>
}