反应中的状态消息未正确打印到浏览器

Question

我根据教程在 React 中构建了这个迷你 Fetch API 应用程序。这相对简单，因为它不使用 props 并且只有 App.js 文件中的所有内容（代码方面）。我会说这在很大程度上是有效的。我想要实现的是将 error/not found 消息打印到浏览器。我会先说讲师没有让我们设置任何 try-catch 块来捕获 promise 错误，它似乎偶尔会发生。

我将在此处包含代码。我 do 收到要打印到控制台的错误或成功消息，但无法将其打印到 Web 浏览器，但这可能是因为我似乎得到了一个以下错误

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'value')

我将在下面添加代码。理想情况下，如果没有找到笑话，它将打印嵌入浏览器的消息。也许我确实正确编码和配置了它，但需要考虑失败的承诺？欢迎任何反馈。我只是在其中使用 React 和 axios。

谢谢！

function App() {
const [state, setState] = useState({
joke: ''
});

useEffect( () => {
fetchData();
},[]); //says to remove it, but that makes the array of jokes keep 
cycling through!! BAD!

const fetchData = async () => {
const result = await 
axios.get('https://api.chucknorris.io/jokes/random');
console.log(result.data.value); 
setState({
  ...state,
  joke: result.data.value,
  searchKeyword: '',
  searchUrl: 'https://api.chucknorris.io/jokes/search?query='
});
};

const searchJoke = (ev) => {
console.log(ev.target.value);
setState({ 
  ...state,
  searchKeyword: ev.target.value
 })
}

const fetchMyJoke = async () => {
const result = await axios.get(state.searchUrl + state.searchKeyword)
console.log(result.data.result);

const jokePos = Math.floor(Math.random()*result.data.result.length + 
1);
console.log(jokePos);

**let badmsg = '' + state.searchKeyword;
if (result.data.result.length < 1) {
  badmsg = 'No jokes available on that word';
  console.log(badmsg);
}
else {
  badmsg = 'howdy, enjoy the joke';
  console.log(badmsg);
}**

setState({
  ...state,
  **joke: result.data.result[jokePos].value
   //badmsg: badmsg**
 });
   //  return badmsg;
}

return (
<div className="container">
<div className="row"> 
  <div className="col-6">   
      <h1 className="title">Chuck Norris API</h1>
      <img src={Chuck} height="70%" width="50%" alt="Chuck Norris force 
  of one"/> 
    </div>

  <div className="col-4 searchJokeCol"> 
    <div className="card"> 
      <div className="card-header"> 
      Search for a word
      </div>
        <div className="card-body">
          <input type="text" onChange={searchJoke} />
        </div>
    </div>
  <div >
 <button onClick={fetchMyJoke} className="btn btn-warning btn-lg" >Generate Joke</button>
     </div>
</div>

</div>
<h2 className="subtitle"> Here is the joke!</h2>
**<h4>{state.badmsg} {state.joke} </h4>**
</div>

  );
}

Answer 1

jokePos 的值不应超过 result.data.result.length - 1，因为数组索引是从零开始的。

示例：

// assumption: result.data.result = [{ value: ... }, { value: ... }, { value: ... }]

const jokePos = Math.floor(Math.random() * result.data.result.length + 1)
// the max value of jokePos can be 3 now and result.data.result[3] is undefined

你应该这样做

const jokePos = Math.floor(Math.random() * result.data.result.length)

反应中的状态消息未正确打印到浏览器

State message in react not printing to browser correctly

state

reactjs

fetch-api

axios