Как добавить строку к URL-адресу API по клику в React js
Я хотел бы добавить строку ко всем URL-адресам, когда я нажимаю кнопку, как это сделать?
Вот код App.js
import React, { Component } from "react";
import Button from './Button';
let API = 'https://someurl.com/';
class App extends Component {
constructor(props) {
super(props);
this.state = {
results: []
};
this.updateUrl = this.updateUrl.bind(this);
}
componentWillMount = () => {
this.fetchData();
}
fetchData = async () => {
const response = await fetch(API);
const json = await response.json();
this.setState({
results: json.results
});
};
updateButton = (event) => {
this.setState({
API.concat('?format=fzjeozfij')
});
}
render() {
return (
<div>
<Button data = {this.state} />
</div>
);
}
}
export default App;
Кнопка.js
import React, { Component } from 'react';
class Button extends Component {
render() {
const updateButton = this.props.data;
return (
<button type = "button" onClick = {updateButton}>Button</button>
)
}
}
export default Button;
Моя цель - получить URL-адрес от const API до https://someurl.com/?format=zegizhgz
Я думаю, что мне нужно изменить функцию fetchData, чтобы объединить некоторую строку с URL-адресом, но я не уверен, как это сделать.
Я хочу, чтобы '?format=blabla' добавлялся, когда я запускаю функцию updateButton, нажимая на кнопку
не могли бы вы попробовать следующее updateButton = (event) => { const api= ${API}?format=fzjeozfij` this.setState({api}); }`
у меня выдает ошибку Syntax error: src/component/App.js: Unexpected token, expected ; (50:16)
и в данных выборки прочитайте состояние следующим образом: await fetch(this.state.api);
updateButton = (event) => { const api= ${API}'?format=wookiee'; this.setState({ api }); } Я все еще получаю неожиданный токен, я неправильно написал?
я использую обратные кавычки, которые `не'
напишите это следующим образом: const api= `${API}?format=wookiee`
все та же ошибка
я напишу код ответа, чтобы я мог его хорошо показать
это ошибка компиляции или ошибка времени выполнения?
во время выполнения, я думаю, он появляется как при загрузке, так и при нажатии на кнопку, но приложение все еще отображается
Ответы 1
updateButton = () => {
const nApi = `${this.state.api}?format=wookiee`;
this.setState({ api: nApi });
this.fetchData(nApi);
}
render() {
return (
<div>
<Button onClick = {this.updateButton}/>
</div>
);
}
fetchData = async (api) => {
const response = await fetch(api);
const json = await response.json();
this.setState({
results: json.results
});
};
Кнопка.jsx
import React, { Component } from 'react';
class Button extends Component {
render() {
const {onClick} = this.props;
return (
<button type = "button" onClick = {onClick}>Button</button>
)
}
}
Я получаю эту ошибку: Uncaught Invariant Violation: ожидается, что слушатель onClick будет функцией, вместо этого получил значение типа object.
Я загрузил свой текущий код здесь jsfiddle.net/yqL9r4zt Нет ошибок, но нет повторной обработки данных
@ Matt355 Matt355, пожалуйста, взгляните на этот stackblitz.com/edit/react-vonflf, я сделал несколько замечаний по коду и удалил тег списка, так как у меня нет его файла, теперь он отображает кнопку в представлении.
Большое спасибо за ответ, у меня ошибка Unexpected token w in JSON at fetchData = async (api) => {
Хорошо, json, на который я нацеливаюсь, имеет ошибку синтаксического анализа, поэтому он работает (в некотором смысле), спасибо.
это то, чего ты хочешь ? постоянный ответ = ожидание выборки (
${API}?format=fzjeozfij);