试图显示文本，但没有运气.但是，我检查了我的控制台，看到带有 p 标签的空 div.应用程序未中断

Question

我正在开发一个笑话应用程序，我自己从头开始构建，没有教程。现在，有一个组件SportsJokesApi，它从我创建的本地json文件夹(SportsJokesData(中提取数据。这是它的设置方式：

const SportsJokesData = [
{
id: "1",
question: "What did the baseball glove say to the ball?",
answer: "Catch ya later!"
}
]
export default Sports Jokes Data

在登录页面上，当用户选择"体育笑话"类别时，他们将被带到一个新页面，该页面将显示与体育相关的笑话。 现在，您需要单击按钮(Click here for a joke)才能显示第一个笑话。我希望当用户选择此类别并首次被带到该页面时，第一个随机笑话已经显示出来。

这就是我设置组件的方式。在我最初的方法中，我创建了一个单独的函数，称为getInitialJoke，它返回一个随机的笑话。然后在渲染中，我创建了一个名为 const{initialJoke}的变量，该变量this.getInitialJoke();然后将显示笑话。由于状态更新是异步的，因此我使用initialjoke?.answer进行了一些安全检查。当我返回并运行应用程序时，没有出现任何笑话，文本也没有显示。但是，我确实在控制台上看到了带有空 p 标签的新div。 有谁知道可能出了什么问题以及我该如何解决这个问题？再一次，我希望一个笑话已经显示出来了。 在此组件中的设置方式，您必须单击Click Here for a Joke按钮才能看到第一个笑话。

import React from 'react'
import SportsJokesData from '../data/SportsJokesData';
import { Link } from 'react-router-dom';
import './Buttons.css';
const initialState = {
randomJoke: {}
};
class SportsJokesApi extends React.Component {
constructor(props) {
super(props);
this.getRandomJoke = this.getRandomJoke.bind(this);
this.state = initialState;
}
getInitialJoke() {
return SportsJokesData[(SportsJokesData.length * Math.random()) << 0];
}
getRandomJoke() {
this.setState({
randomJoke: SportsJokesData[(SportsJokesData.length * Math.random()) << 0]
});
}

render() {
const {randomJoke} = this.state;
const {initialJoke} = this.getInitialJoke();
return (
<React.Fragment >
<div>
<p>{initialJoke?.question}</p>
</div>
<div>
<p>{initialJoke?.answer}</p>
</div>
<div className="flex">
<p>{randomJoke.question}</p> 
</div>
<div className="flex">
<p>{randomJoke.answer}</p>
</div>
<div className="flex">
<button class="btn joke" onClick = {this.getRandomJoke}>Click here for joke </button> 
</div>
<div className="flex">
<Link to="/ProgrammingJokes">
<button className="btn programming">Programming Jokes</button>
</Link>
</div>
<div className="flex">
<Link to="/DadJokes">
<button className="btn dad">Dad Jokes</button>
</Link>
</div>
<div className="flex">
<Link to="/SpanishJokes">
<button className="btn spanish">Chistes en ñ</button>
</Link>
</div>
<div className="flex">
<Link to="/">
<button className="btn home">Home Page</button>
</Link>
</div>
</React.Fragment >
);
}
}
export default SportsJokesApi;

Answer 1

也许你可以在 React 生命周期事件之一中调用 initialJoke(( 函数，例如像这样：

// Add this to your code fellow. 
componentDidMount() {
this.getInitialJoke();
}

有关生命周期事件及其工作原理的更多信息，请查看这篇很棒的文章，伙计。

反应：组件生命周期事件