Как в запросе react api передать id страницы?

Question

[hollanditkzn]

Я немного не пойму как сделать так чтобы react получал данные из определенной ссылки. В примере показал, что id динмаичная, что может быть ссылка /api/test/1, /api/test/2, /api/test/3, /api/test/4 и так далее

import axios from 'axios';

axios.get('/api/test/:id')
    .then((response) => console.log(response));

И чтобы понять что она есть в роутере node js

.get('/api/test/:id', async(ctx) => {
        let theme = await Test.theme(ctx.params.id);
        let test = await Test.test(ctx.params.id);
        let answearArr = await Promise.all(test.map(item => {
            return Test.answear(item.id);
        }));

        for(let n=0; n<answearArr.length; n++){
            test[n].answer = answearArr[n];
        }

        theme.test = rand_array(0,2,test);
        ctx.body = theme;
    })

Comments

[alvvi]

Я немного не пойму как чтобы получить по api данных, для того чтобы в react засунуть эти данные ссылка где присутствует id?

Реквестирую перевод на русский.

[hollanditkzn]

Илья Ростопка, Обновил

Answer 1

[alvvi]

Если я правильно понял, то

const id = 1
axios.get(`/api/test/${id}`).then((response) => console.log(response));

id может быть возвращено из функции, получено из страницы, взято из ввода пользователя, в общем обычная переменная

Comments

[hollanditkzn]

Илья Ростопка А как понять, что именна этот id берет, просто тут я понимаю, что если страница у меня /testing/4, то в данном примере он будет все равно брать данные из страницы /api/test/1. Если да, то мне нужно чтобы она брала из /api/test/4 страницы в react компоненте. Поэтому для меня не понятно как передавать id страницы внутри компонента react

[hollanditkzn]

Для более подробного у меня есть страница

router.get('/testing/:id', async ctx => {
        await ctx.render('test', {
            title: 'Тест',
        })
    })

И внутри этого рендеринга стоит react компонент

import axios from 'axios';

axios.get('/api/test/:id')
    .then((response) => console.log(response));

И в роуте этой страницы /api/test/:id следующие данные выводит

router.get('/api/test/:id', async(ctx) => {
        let theme = await Test.theme(ctx.params.id);
        let test = await Test.test(ctx.params.id);
        let answearArr = await Promise.all(test.map(item => {
            return Test.answear(item.id);
        }));

        for(let n=0; n<answearArr.length; n++){
            test[n].answer = answearArr[n];
        }

        theme.test = rand_array(0,2,test);
        ctx.body = theme;
    })

[Виталий]

hollanditkzn, у тебя этот ид, это одна из пропс или стейт компонента, метод запроса аксиос ты вызывать должен из компоненты, которая должна знать свой ид из состояния. Если у тебя это разнве компоненты, то ты этот ид должен перредавать в кнопку и в форму теста одинаково
что-то из серии

<TestItem id={3}/>
const TestItem = ({id})=><div onClick={()=>requestHandler(id)}</div>

ну или подобные вариации

[hollanditkzn]

Виталий, Нет не понял. У меня во вьюшке

<div class='container'>
        <div id='root'></div>
</div>
<script src='/client/testing.js'></script>

В testing.js находится как раз этот запрос, это react компонент непосредственно
Как этот файл может знать id вот проблема

[hollanditkzn]

Виталий, Допустим в этой статьи там он статичную ссылку получает по id, но у меня овсем по другому реализовано

[Виталий]

hollanditkzn, ты не показываешь файл в котором вся суть )) покажи полностью свой компонент

[Виталий]

hollanditkzn, в твоей статье у тебя же показано, что чел берет из пропсов компонента ид, и в момент его создания делает реквест, в момент его получения делает установку стейта с ответом, что повлечет за собой ререндер

componentWillMount() {
  axios.get(`http://exmaple.com/blog/${this.props.id}`)
	.then(response => this.setState(response.data))
}

[hollanditkzn]

Вот все мои файлы
router.js

const Router = require('koa-router'),
    User = require('./model/user'),
    Test = require('./model/test'),
    router = new Router();
router.get('/testing/:id', async ctx => {
        await ctx.render('test', {
            title: 'Текст',
            path: 'test'
        })
    })
    router.get('/api/test/:id', async(ctx) => {
        let theme = await Test.theme(ctx.params.id);
        let test = await Test.test(ctx.params.id);
        let answearArr = await Promise.all(test.map(item => {
            return Test.answear(item.id);
        }));

        for(let n=0; n<answearArr.length; n++){
            test[n].answer = answearArr[n];
        }

        theme.test = rand_array(0,2,test);
        ctx.body = theme;
    })

Во вьюшке public/test.pug

include layout
    .container
script(src='/client/testing.js'

И в /client/testing.js там должен быть react компонент теста, но пока что я хочу понять как я должен вывести данные

import axios from 'axios';

axios.get('/api/test/1')
    .then((response) => console.log(response));

Вот и все

[hollanditkzn]

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

import axios from 'axios';
console.log(this.props.id);
axios.get('/api/test/1')
    .then((response) => console.log(response));

Как я знаю что не будет работать, потому что система не знает id страницы, и переменой нет, чтобы передать туда данные, то получаю в ответ ошибку

Uncaught TypeError: Cannot read property 'props' of undefined

Надеюсь я уже понятно описал, что хочу сделать и как их получить в реакт

[Виталий]

Как можно что-то получить в реакт когда нет реакт, не понимаю. Или ты должен откуда-то получать, чудом он сам не появится. У тебя логика приложения вообще не ясна.
Судя по тому что ты это изучаешь, мудришь ты не в том месте.

[hollanditkzn]

Виталий, Ладно, как мне из бд брать информацию? как понимаю по api
Откуда может компонент знать что выводить react компонент.
Допустим я сделал react компонент
Вот пример допустим https://codepen.io/rusline/pen/JMmJQM?editors=0010
данные статичные, но мне нужно что эти данные можно взять на страницы /api/test/:id где :id это id темы.
И как мне передать в props если я не могу определить еси я ничего не знаю про информации страницы?
Вот допустим такой код, тоже такую ошибку выведит

class Form extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            currentQuestion: 0
        }
    }
    componentWillMount = () => {
        console.log(this.props.id);
        axios.get('/api/test/{this.props.id}')
            .then((response) => console.log(response));
    };

    onClick = (e) => {
        if(this.state.currentQuestion != 2){
            e.preventDefault();
        }
        this.setState({
            currentQuestion: ++this.state.currentQuestion
        })
    }
    render(){
        const { thema } = this.props;
        const question = thema[0].test[this.state.currentQuestion];

        return(
            <div>{this.componentWillMount}</div>
        )
    }
}

Как ни крути. Мне нужно получить просто данные из базы данных и вывести их в компоненте. Надеюсь я понятно выразился

[hollanditkzn]

Виталий, То что Вы послали мне, это берется

render() {
  return (
	<div>
	  <BlogPost id={123} /> //Сюда он передал id
	</div>
  );
}
// BlogPost.js
componentWillMount() {
  axios.get(`http://exmaple.com/blog/${this.props.id}`) // А тут он вывел
	.then(response => this.setState(response.data))
}

Но у меня нет app.js компонента допустими id надо брать из api? как тут быть?

[Виталий]

hollanditkzn, я вот тебя понять не могу, ты что не можешь целиком скинуть свои компоненты?

[Виталий]

hollanditkzn, если нужно получить список ип из апи, то делается так
<List> - запрашивает с апи список текущих ид и внутри себя делает рендер типо как-то так
<Item>запрашивате данные для себя
ну или варианты типо того, тебе надо понимать, что ты хочешь получить. И по шагам написать себе нужные апи эндпоинты, а потом завернуть эти данные в компоненты так, как ты считаешь нужным

render(){
    return <div>{this.props.ids.map(id=><Item id={id}>)}<div>
}

[hollanditkzn]

Виталий, Мне нужно в сторону react router смотреть?

[Виталий]

hollanditkzn, сюда
Посмотри как сделан компонент топик, в него как раз передается ид, возможно это то, что ты так хочешь.