Блог

Я хочу передать параметры в этой функции, чтобы получить обновленные / отфильтрованные данные на той же странице при применении некоторых фильтров?

Это работает нормально для первоначального рендеринга, но я не могу получить обновленные данные из моего же компонента, поскольку эта функция getServerSideProps находится за пределами моего компонента.

Mycomponent

 let API_URL = `https://api.spaceXdata.com/v3/launches?limit=100`
const spacex = ({ missions }) => {
  const [allMissions, setallMissions] = useState(missions)

  const filterResults = (filter, value) => {
    getServerSideProps(`${API_URL}amp;${filter}=${value}`) // but this is not accessible from here, getServerSideProps is undefined here as this is outside the function
  }

render() {
 return (
  {missions.map((mission) => <li>mission.name</li>)}
 )
}
 

 export const getServerSideProps = async (API_URL) => {
  const res = await fetch(API_URL)
  const missions = await res.json()
  if (!missions) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
  return {
    props: {
      missions,
    },
  }
}
 

Вы не можете вызывать getServerSideProps свой компонент на клиенте, getServerSideProps он выполняется только на сервере.

Вместо этого вы должны делать запрос непосредственно от клиента всякий раз, когда вам нужно фильтровать данные.

 const API_URL = `https://api.spaceXdata.com/v3/launches?limit=100`

const SpaceX = ({ missions }) => {
    const [allMissions, setAllMissions] = useState(missions)

    const filterResults = async (filter, value) => {
        const res = await fetch(`${API_URL}amp;${filter}=${value}`)
        const missions = await res.json()
        setAllMissions(missions)
    }

    return (
        {allMissions.map((mission) => <li>mission.name</li>)}
    )
}