如何在反应的HTML标签中显示变量值

Question

我正在做 react 项目，我需要在 HTML 中显示书名

元素 我创建了使用 axios 从 mongo DB 获取书籍的 react 函数组件

    import React from 'react';
    import axios from 'axios';
    import { useState } from 'react';



    export default function Main1() {

    var [books,setData]=useState([]);// must be in react function component 
    var book="";
    

    // use axios get async function
    //-------------------------------------------------------------------------------------------- 
   --------------------
    const clicked= async () => {// async function started
        console.log('clicked');
        try {
          const response = await axios.get('http://localhost:5000/');// get response from server
         console.log(response.data);
         //books=response.data;// add data to array
        // bks=response.data;
        books=response.data;
         console.log(books);

        } catch (err) {
          // Handle Error Here
          console.error(err);
        };

        book=books.find(book=>book.isbn===document.getElementById("p2").innerText);
        console.log(book._id);

        try {
            const responseB = await axios.get('http://localhost:5000/'+book._id);// get response 
    from server
           console.log(responseB.data);
           //books=response.data;// add data to array
          // bks=response.data;
         book=responseB.data;
  
          } catch (err) {
            // Handle Error Here
            console.error(err);
          };

          document.getElementById("p1").innerText=book;



       // console.log(book.title);
       // document.getElementById("p1").innerText=book.title;

       // let bk=bks.find(isbn='20');

        //console.log(bk.title);
        


        //document.getElementById('p1').innerText=books[0].title;


    };

  
        
    // use axios get async function
    //-------------------------------------------------------------------------------------------- 
    --------------------
 



    
    return (
        <div>
           <button  onClick={clicked}>
                    hi
                </button>
                <p id='p2'> 
                    20
                    
                    
                </p>  
                <p>
                   {book} 
                </p>
        </div>
    )
    };

当我按下按钮时的问题，我在控制台日志中正确显示了 book 变量，但它无法在下面显示

标签

{书}

Answer 1

你需要重新设置状态。

示例

export default function Main1() {

    const [books,setData]=useState(['']);// must be in react function component 
    /* var book=""; You can set on usestate as empty string*/  

const clicked= async () => {// async function started
        console.log('clicked');
        try {
          const response = await axios.get('http://localhost:5000/');// get response from server
         console.log(response.data);
         //console.log(books); // removing it will give you empty object because you are not assigning anything variable
         setData(response.data); // set the variable that you get

        } catch (err) {
          // Handle Error Here
          console.error(err);
        };