使用 Axios get response 使用 reactjs 构建前端

Question

我是 React js 的新手，我有一个带搜索栏的主屏幕。现在，当用户搜索（比方说）员工姓名时，我想针对我的数据库查询它，例如 select 来自员工的用户名，其中 employee.name =“无论用户正在搜索什么” .

我终于找到了一种将搜索参数发送到我的 api 的方法，并且在控制台日志中得到了结果，这是相关代码：

const [firstNames, setFirstNames] = useState("");
<input
            value={name}
            type="text" 
            id="header-search"
            placeholder="Enter the search term"
            name={'id'}
            onChange={handleChange}
            />
        
        <button onClick={HandleSearch}>Search</button>

const handleChange= (e) => {
    e.preventDefault();
    setName(e.target.value);
  }

const HandleSearch = e => {

    
    e.preventDefault();
    axios.get(`http://localhost:8080/search?id=`+name)
        .then(response => {
          setLoading(false);
          if(response.status == 200 && response != null){
            
              console.log("RES",response.data);
              var tmpArray= [];
              var tmpJsx =[];
              // I was checking to see if I could retrieve the data from my response.
              var dataparse = response.data;
              var length = dataparse.length;
              console.log("length of my response array is: "+length)

              //printing the elements in array
              for (var i=0; i< length; i++){
                
                //console.log(response.data[i].firstname);
                
                 setFirstNames((firstNames) => [...firstNames, response.data[i]]);
                
              }

              
          } else{
                console.log('problem fetching');
            }
        })
        .catch(error => {
          setLoading(false);
          console.log("error occured: "+error);
        });
}

这是我的 return 函数：

{firstNames.map(function (names, index) {
                  return (
                    <tr key={index}>
                      <td> {names.firstname} -</td>
                      <td> {names.lastname}</td>
                    </tr>
                   )
                })}

如何将 headers 添加到此数据。例如

firstname lastname
abc        abclast

我试着把它放在地图函数中，但我的数据看起来像：

firstname lastname
abc        abclast
firstname lastname
def        deflast
firstname lastname
ghi        ghilast

我确定我缺少某些东西，任何人都可以帮助我如何实现这一点：谢谢。

firstname lastname
abc        abclast
def        deflast
ghi        ghilast

Answer 1

您的变量 'name' 只处理一个名字。您的查询 returns 一个数组。我不确定它是否应该是这样的，所以你可以在顶部添加它，或者将 [name, setName] 替换为..

const [firstNames, setFirstNames] = useState([]);

然后你就有了一个数组，你可以将名字添加到其中。

然后更改这部分代码 - 您可以删除 var tmpArray= [];

//printing the elements in array
for (var i=0; i< length; i++){              
  //console.log(response.data[i].firstname);               
  //tmpArray.push(response.data[i].firstname);
  setFirstNames(firstNames => [...firstNames, response.data[i].firstname] );                
}

这会将所有返回的名字添加到 firstNames 中然后，您可以通过将 {firstNames[x]} x 作为索引，在您的 html 中访问 firstNames，或者您可以将它们全部映射到 html 元素

{firstNames.map(function(name, index){
                  return <p> {name}</p>
                })
              }

使用 Axios get response 使用 reactjs 构建前端

buildind front end with reacts using the Axios get response

mysql

api

frontend

backend

reactjs