如何将下拉数据绑定添加到 API Json 数据表？

tony 发表于 Dev

托尼

下面是数据表组件。我想添加一个动态下拉列表来显示性别，以便在第一页加载时，API 调用使用默认参数来获取所有记录..

function Beneficiary() {
  const dispatch = useDispatch();
  const history = useHistory();
  const [person, setPerson] = useState([]);
  const [loading, setLoading] = useState(true);
 
  

  useEffect(() => {
    const getData = async () => {
      const response = await fetch(
        "https://pshs3.herokuapp.com/bhcpf?query={}&limit=0&skip=0"
      );
      const result = await response.json();
      const item = result.data;

      setTimeout(() => {
        setPerson(item);
        dispatch(setPersonDetails(item[0]));
        setLoading(false);
      }, 1000);
    };
    getData();
  }, [dispatch]);


  return (
    <Wrapper>
      <TopWrapper>
        <IconButton onClick={() => history.goBack()}>
          <ArrowBackIcon />
        </IconButton>
        
      </TopWrapper>


      <MiddleWrapper>
        <h1> Beneficiaries </h1>

        <SearchWrapper>
          
              //add dropdown

        </SearchWrapper>

      </MiddleWrapper>

      <BottomWrapper>
        {loading ? (
          <Spinner />
        ) : (
          <Table
            cellSpacing="40"
            cellPadding="20"
            striped
            bordered
            hover
            responsive
          >
            <thead>
              <tr>
                <th>Enrollment ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>LGA</th>
                <th>WARD</th>
              </tr>
            </thead>
            <tbody>
              {person
                .map((record) => {
                  return (
                    <tr key={record.id}>
                      <td>{record.enrollment_id}</td>

                      <td>
                        {" "}
                        <Link
                          onClick={() => dispatch(setPersonDetails(record))}
                        >
                          {record.full_name}
                        </Link>
                      </td>
                      <td>{record.gender}</td>
                      <td>{record.lga}</td>
                      <td> {record.ward} </td>
                    </tr>
                  );
                })}
            </tbody>
          </Table>
        )}
      </BottomWrapper>
      
    </Wrapper>
  );
}

export default Beneficiary;

但是，当下拉列表更改时，事件应使用所选值作为参数触发对 API 的新调用。

克里希纳基里特04

你可以有一个额外的状态，比如

const [selectedGender,setSelectedGender] = useState("Female"); //any default value of your choice

将下拉菜单放在您想要的位置

<select id="gender" value="Female" onChange={(e)=>setSelectedGender(e.target.value)>
 <option value="Male">Male</option>
 <option value="Female">Female</option>
 <option value="Others">Others</option>
</select>

现在修改您的代码，通过修改您的 useEffect 代码，根据用户选择的性别来呈现数据。

useEffect(() => {
    const getData = async () => {
      const response = await fetch(
        `https://pshs3.herokuapp.com/bhcpf?query={}&limit=0&skip=0&gender=${selectedGender}`
      );
      const result = await response.json();
      const item = result.data;

      setTimeout(() => {
        setPerson(item);
        dispatch(setPersonDetails(item[0]));
        setLoading(false);
      }, 1000);
    };
    getData();
  }, [dispatch,selectedGender]);