使用另一个组件的 API 响应数据更新 React 元素

Question

我想做一个简单的反应应用程序，从MySQL数据库("username"， "balance"， "purchases")拉信息。

到目前为止，我已经使用node和react从数据库中提取HTTP查询，并在网站上显示每个元素。

然后，我创建了API查询，用于在数据库中搜索以我在搜索栏中输入的内容开头的所有条目。

我遇到的问题是我如何改变显示用户名等元素的状态，从API查询的新过滤信息?搜索栏和数据元素是两个独立的组件，所以我不能直接使用use effect钩子。

我不能使用过滤器方法，因为数据库太大，我已经将查询限制发送到100。

下面是目前为止的代码:

PlayerData.js

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

const Player = () => {
const [playerData,setPlayerData]=useState([])
useEffect(()=>{
axios.get("http://localhost:3001/api/get").then((res)=>{
console.log(res.data)
setPlayerData(res.data)
})
.catch(err=>{
console.log(err);
})
},[])
return (
<>
{playerData.map((data,id)=>{
return <div className="Player" key={id}>
<span className="Username"> { data.name }  </span> 
<span className="Crystals"> { data.balance }  </span> 
<span className="DateModi"> {Object.keys(JSON.parse(data.items)).length}  </span>
</div>
})}

</>
)
};
export default Player;

---

SearchBar.js

import { useState } from "react";
import axios from 'axios'
const Search = () => {
const [searchTerm, setSearchTerm] = useState("")
axios.get(`http://localhost:3001/api/getSearchName/${searchTerm}`).then((res)=>{
console.log(res.data)
})
return (
<div className="Search">

<input className = "InputField" type="text" placeholder="Enter Username:" onChange={e => {setSearchTerm(e.target.value)}}/>
<span className="SearchButton" onClick={console.log(searchTerm)}>
Search
</span>
</div>
)
};
export default Search;

Answer 1

如果我理解正确的话，您需要将PlayerData的状态设置为共享组件(App)，并将其传递给Player.js组件。然后在搜索时，它将被覆盖并更新Player.js

中的信息。

function App() {
const [playerData, setPlayerData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = () =>
axios
.get("http://localhost:3001/api/get")
.then((res) => {
setPlayerData(res.data);
})
.catch((err) => {
console.log(err);
});
const handleSearch = (text) => {
const clearText = text.trim();
if (!clearText.length) {
fetchData();
return;
}
axios
.get(`http://localhost:3001/api/getSearchName/${clearText}`)
.then((res) => {
setPlayerData(res.data);
});
};
return (
<div>
<div>
<Search handleSearch={handleSearch} />
</div>
<div>
<Player playerData={playerData} />
</div>
</div>
);
}

Search.js

const Search = ({ handleSearch }) => {
const [searchTerm, setSearchTerm] = useState("");
return (
<div className="Search">
<input
className="InputField"
type="text"
placeholder="Enter Username:"
onChange={(e) => {
setSearchTerm(e.target.value);
}}
/>
<span className="SearchButton" onClick={() => handleSearch(searchTerm)}>
Search
</span>
</div>
);
};

Player.js

const Player = ({ playerData }) => {
return (
<>
{playerData?.length ? (
playerData.map((data, id) => {
return (
<div className="Player" key={id}>
<span className="Username"> {data.name} </span>
<span className="Crystals"> {data.balance} </span>
<span className="DateModi">
{" "}
{Object.keys(JSON.parse(data.items)).length}{" "}
</span>
</div>
);
})
) : (
<div>Loading...</div>
)}
</>
);
};