Как получить реквизиты от родительского компонента при использовании getStaticProps?
Резюме) Как вы получаете реквизиты от родительского компонента, когда ваш текущий дочерний компонент получает только данные в качестве реквизитов от getStaticProps?
Например, компонент Todos является дочерним компонентом родительского компонента, и Todos должен получать реквизиты от родителя. Поскольку я использую getStaticProps для получения данных в начале приложения, компонент Todos имеет реквизиты только из getStaticProps.
const Todos = ({ todos }) => {
return (
<div>
<ul>
{todos.length > 0 ? todos.map((todo) => <li>{todo}</li>) : "No todos"}
</ul>
</div>
);
};
export default Todos;
export async function getStaticProps() {
const todos = await fetch("https://.../todos");
return {
props: {
todos,
},
};
}
- В родительском компоненте компонента Todos:
export default function Home({ currentUser, setCurrentUser }) {
return (
<div>
<Todos currentUser = {currentUser} setCurrentUser = {setCurrentUser}/>
</div>
);
}
//and then in Todos.js
const Todos = ({ props }) => {
...}
Если я передаю реквизиты, как указано выше, если я консольно регистрирую реквизиты в компоненте Todos, я вижу только «currentUser». Я не вижу реквизиты (todos) из getStaticProps.
2. Итак, я попробовал другой способ, используя Link, но я не смог найти способ передать реквизиты, currentUser и setCurrentUser, используя Link.
export default function Home({ currentUser, setCurrentUser }) {
return (
<div>
<Link href = "/Todos">
<a>Click to see Todos</a>
</Link>
</div>
);
}
Что мне не хватает? Любая помощь будет оценена по достоинству!
@hangindev.com Да Todos — это компонент в папке /pages. Я хотел отображать данные при первой загрузке страницы так же, как я использовал бы useEffect() для получения начальных данных. Я думал, что getStaticProps — это следующая версия useEffect() для next.js. Это не?
Ответы 1
Существует правило, в котором говорится, что вы можете использовать только функции сайта сервера, такие как получитьстатические свойства() или получитьServerSideProps (), в компонент страницы, поэтому я предполагаю, что у вас есть Дом в качестве компонента страницы, и вы хотите использовать Компонент Todo внутри домашнего компонента. По сути, вы должны передать получитьстатические свойства() в домашний компонент:
export default function Home(props) {
return (
<div>
<Todos todos = {props.todos} currentUser = {props.currentUser} setCurrentUser = {props.setCurrentUser}/>
</div>
);
}
export async function getStaticProps() {
const todos = await fetch("https://.../todos");
return {
props: {
todos,
},
};
}
Короче говоря, вы должны изменить свою структуру.
getStaticPropsможно использовать только для компонентов страницы (компоненты в/pages) и запускать только во время сборки. ЕслиcurrentUserтребуется для получения задач, и это неизвестно во время сборки,getStaticPropsне является правильным решением вашей проблемы.