如何在React中用选择选项过滤表格(组件功能)

146 阅读1分钟

已关闭。这个问题需要细节或清晰度。它目前不接受答案。 请补充细节并澄清你要解决的问题。这将有助于其他人回答这个问题。你可以编辑该问题或发布一个新的问题。

4分钟前关闭。

我找不到如何在React中用Select(下拉)来过滤一个表格。我在Google上找到了一个例子,但他们用的是Node,但他们的代码在我的React应用中不起作用。我更喜欢使用组件而不是类函数。这是我的代码。我想通过选择选项来过滤表格的例子:

const [data, getData] = useState([])
const URL = 'https://jsonplaceholder.typicode.com/posts'
useEffect(() => {
fetchData()
}, [])

const fetchData = () => {
fetch(URL)
    .then((res) =>
        res.json())

    .then((response) => {
        console.log(response);
        getData(response);
    })

  }

  return (
  <>
    <Select options=["A","B","C"] />
    <table>
        <tr>
            <th>User Id</th>
            <th>Id</th>
            <th>Title</th>
            <th>Description</th>
        </tr>
        {data.map((item, i) => (
            <tr key={i}>
                <td>{item.userId}</td>
                <td>{item.id}</td>
                <td>{item.title}</td>
                <td>{item.body}</td>
            </tr>
         </table>
      </>