反应搜索字段在第一次加载时不返回

Question

我是新来的反应者，并且我遇到以下问题：我正在用钩子进行搜索输入，但是当页面加载时它变成空的，只有当我在搜索字段中键入某些内容时，这些项目才会出现。我做错了吗？在此先感谢

这是我的代码：

index.js

import {getUsers} from '../actions';

const Home = () => {
    const [data, setData] = useState([]);
    const [refreshTable, setRefreshTable] = useState(0);

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
    }
    fetchData();
}, [refreshTable]);
return(
    <Table data={data} />
)

table.js

function Table(props){
const [searchTerm, setSearchTerm] = useState("");
const [searchResults, setSearchResults] = useState([]);
const handleChange = e => {
    setSearchTerm(e.target.value);
};
useEffect(() => {
    const results = props.data.filter(person =>
        person.name.includes(searchTerm)
    );
    setSearchResults(results);
}, [searchTerm]);
return(
    <input type="text" placeholder="Filter table content" value={searchTerm} onChange={handleChange} />
{searchResults.map(item => (
    <tr key={item.id}>
        <td>{item.username}</td>
        <td>{item.name}</td>
        <td className="verde">{item.email}</td>
        <td className="verde">{item.city}</td>
        <td>{item.rideGroup}</td>
        <td>{item.Sun ? "Sun" : ""} {item.Mon ? " Mon " : ""} {item.Tue ? " Tue" : ""} {item.Wed ? " Wed" : ""}
        {item.Thu ? " Thu" : ""} {item.Fri ? " Fri" : ""} {item.Sat ? " Sat" : ""}</td>
        <td className="verde">3</td>
        <td className="verde">2</td>
        <td>39</td>
    </tr>
))}
)

Answer 1

您可以尝试使用整个data属性初始化Table的搜索结果状态。像这样：

function Table ({ data = [] }) {
  const [searchResults, setSearchResults] = useState(data);

  useEffect(() => {
    setSearchResults(data)
  }, [data])

data已从道具中变形，以进行更清洁的道具处理

签出this answer