I'm working with a nice chatbot program for React someone wrote, and the thing is, you can actually bind the bot's responses to function calls like this:
render() {
const { classes } = this.props;
return (
<ChatBot
steps={[
{
...
{
id: '3',
message: ({ previousValue, steps }) => {
this.askAnswer(previousValue)
},
end: true,
},
]}
/>
);
Where message is the answer of the bot that it calculates based on the previousValue and askAnswer is a custom function you'd write. I'm using an API that inputs the previousValue to a GPT model, and I want to print the response of this API.
However, I just can't wrap my head around how I could pass the response of the API to the message. I'm trying this:
constructor(props) {
super(props);
this.state = { response: " " };
}
...
askAnswer(question) {
var jsonData = { "lastConversations": [question] }
fetch('http://my_ip:80/query', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(jsonData)
}).then(response => response.json())
.then(data => { this.setState({ response: data["botResponse"] }) });
return (this.state.response)
}
I've been struggling with this for the past 2-3 hours now.
I've tried a couple of combinations, and nothing seems to work:
If I do as seen above, it seems like this.state.response just won't get
updated (logging data["botResponse"] shows there is a correct
reply, so the API part works and I get the correct response).
If I try async-await for askAnswer and the fetch call, then I can
only return a Promise, which is then incompatible as input for the
ChatBot message.
If I do not await for the fetch to complete, then
this.state.response just stays the default " ".
If I return the correct data["botResponse"] from within the second .then after the fetch, nothing happens.
How am I supposed to get the API result JSON's data["botResponse"] text field out of the fetch scope so that I can pass it to message as a text? Or, how can I get a non-Promise string return after an await (AFAIK this is not possible)?
Thank you!
In your last 2 line
.then(data => { this.setState({ response: data["botResponse"] }) });
return (this.state.response)
You are updating the state and trying to read and return the value in the same function which I think will never work due to async behaviour of state. (this is why your this.state.response in the return statement is the previous value, not the updated state value).
I'm not sure but you can write a callback on this.setState and return from there, the callback will read the updated state value and you can return the new state.
Related
I'm working on an app and I'm trying to save the API response into my state but I keep getting an error at this point. Here's the error below:
Error: Material-UI: capitalize(string) expects a string argument.
The similar errors I found online is about Snackbars and I couldn't even get a clue to apply the fix to mine.
The tiring part of this is that, it was working until suddenly (without changing anything in that part of the code) it started giving me this error.
Here's my code below:
fetchData = async (data) => {
await axios.get("...", { headers: { "Content-Type": "application/json" }})
.then(res => {
this.setState({ userData: res.data.user }) //it throws error on this line
})
}
If I remove the setState function, it did work fine, just that I won't be able to pass my data to the template.
How do I get this fixed?
Can you try this:
fetchData = (data) => {
axios.get("...", { headers: { "Content-Type": "application/json" }})
.then(res => {
console.log("res: ", res.data)
res.data.user &&
this.setState({ userData: res.data.user })
})
}
what I'm trying to do here is to avoid hitting the setState if there is no res.data.user, if it exists it will work properly, and I don't actually think you need to use async-await here as you are using a promise passed solution
I am creating a blog application in rest framework and reactjs. On the home page, under componentDidMount, I send an API call using axios to get all the articles and setState of articles to the return. As I have studied, axios works on the idea of promise such that the code doesnt proceed, if the API is not fetched for a particular component. Please tell me, if I am wrong.
Then, I send a GET call to get the writer's name, who wrote the article by the id. Though, I assumed that the axios works as a promise. But, it doesnt work that way. Now, I am not sure how to move ahead.
Here is a snippet. So, in mainBody.js, I make the api call as:
class MainBody extends Component {
state = {};
componentDidMount () {
this.get_all_articles();
};
get_writer_name (id) {
let authstr = 'Bearer ' + window.localStorage.token;
let writer_url = "http://localhost:8000/api/writer/" + id.toString() + "/";
axios.get(writer_url, { headers: { Authorization: authstr }})
.then(response => {
console.log(response.data['name'])
return response.data['name'];
})
.catch(err => {
console.log("Got error")
})
};
get_all_articles () {
let authstr = 'Bearer ' + window.localStorage.token;
axios.get("http://localhost:8000/api/articles/", { headers: { Authorization: authstr }})
.then(response => {
this.setState({articles: response.data});
})
.catch(err => {
console.log("Got error")
})
}
render () {
return (
{this.state.articles.map((article, key) =>
<ArticleView key={article.id} article={article} writer_name={this.get_writer_name(article.created_by)} />
)}
)
}
}
In articleview2, I print all the data that is present in each of the articles along with the writer's name.
My articleview class is:
class ArticleView extends Component {
state = {article: this.props.article};
componentDidMount() {
console.log(this.props.writer_name;
}
render () {
return (
<React.Fragment>
<h2>{article.title}</h2>
<p>{article.body}</p>
<span>{this.props.writer_name}</span>
</React.Fragment>
)
}
}
If you see closely, I wrote two console.log statements to get the writer names. Based on the order, first the console log present in articleview class runs, which is undefined, and thenafter the data is fetched from the API call and the console log runs which returns the correct writer name.
I wanted to know, where is the error? Also, as I noticed, there are too many API calls being made to get the writer's name multiple time for all the listed articles. What are the industry best practices for these cases?
I want to know where is the error.
When you are writing this.state.articles.map(), means you're using property map of the Array articles which may be undefined before the data is fetched that will cause you the error Cannot read property map of undefined.
Solution
Now, as the API request is asynchronous, means render method will not wait for the data to come. So what you can do is use a loader variable in the state, and set it to true as long as the request is being made, and when the response has come, make it false, and show the loader in render when this.state.loader is true, and show articles when it is false.
Or you can initialize this.state.articles with an empty array that won't cause you the error.
Also, as I noticed, there are too many API calls being made to get the writer's name multiple time for all the listed articles. What are the industry best practices for these cases?
It is extremely bad practice to make an API request in the loop. Even myself has been scolded on it once I did it in my company.
Solution
You have tell your backend engineer to provide you filter for including the writer's name in each object of the article. We use Loopback on our backend, which provides a filter for including the related model in each object internally.
Since your API calls have a lot of things in common, you should first set up an axios instance that re-uses those common features:
const api = axios.create({
baseURL: 'http://localhost:8000/api/',
headers: { Authorization: `Bearer ${localStorage.token}` }
});
Now since your MainBody needs to fetch the resources from the API asynchronously, there will be a short period where the data is not yet available. There are two ways you can handle this. Either the MainBody can be responsible for making all the calls, or it can be responsible for just making the call to get all the articles, then each of the ArticleView components can be responsible for getting the writer's name. I'll demonstrate the first approach below:
class MainBody extends Component {
state = { articles: null, error: null, isLoading: true };
async componentDidMount () {
try {
const response = await api.get('articles/');
const articles = await Promise.all(
response.data.map(async article => {
const response = await api.get(`writer/${article.created_by}/`);
return { ...article, writer_name: response.data.name };
})
);
this.setState({ articles, isLoading: false });
} catch (error) {
this.setState({ error, isLoading: false });
}
}
render () {
const { articles, error, isLoading } = this.state;
return isLoading ? 'Loading...' : error
? `Error ${error.message}`
: articles.map(article => (
<ArticleView
key={article.id}
article={article}
writer_name={article.writer_name}
/>
)
);
}
}
I Have tried various combinations of this, and none works. Any idea?
handleSubmit(event) {
let newsletter = 'https://domain.us0.list-manage.com/subscribe/post-json?u=00000&id=00000';
let email = '&EMAIL=' + this.state.value;
fetch(newsletter + email, {
mode: 'no-cors',
})
.then(function(response) {
return response.json().then(data => this.setState({message: data.msg}));
});
console.log(this.state.message);
console.log(this.state.value);
event.preventDefault();
}
The error I get is:
Uncaught (in promise) SyntaxError: Unexpected end of input
at App.js:35
at <anonymous>
In the network tab, everything looks right. I'm getting the following response:
{"result":"error","msg":"user#gmail.com is already subscribed to list."}
I would structure and use Promises differently, you can simply do as follows and make your code more readable:
handleSubmit(event) {
event.preventDefault();
let newsletter = 'https://domain.us0.list-manage.com/subscribe/post-json?u=00000&id=00000';
let email = `&EMAIL=${this.state.value}`;
fetch(`${newsletter}${email}`, { method: 'GET', mode: 'no-cors' })
.then(response => response.json())
.then(data => {
// Here you can also handle errors
if (data.result === 'error') {
// Handle Error
} else {
this.setState({ message: data.msg });
}
console.log(this.state.message);
console.log(this.state.value);
})
.catch(err => console.log(err));
// Keep in mind that these console statements might
// execute before your Promise is resolved, thus
// referring to the state before the request
// has been fulfilled. For this reason I commented them out
// console.log(this.state.message);
// console.log(this.state.value);
}
I noticed you used a mixture of function and =>, so I would suggest to pick one of the two unless you have a specific reason to use one or the other.
I fear that the fact that you use function the first time creates a new context so that this now refers to whatever this is inside the function where you convert to json, since you don't want to create a new context in this scenario, stick with arrow functions.
This is the kind of approach I usually follow when handling AJAX requests, since the first .then is returning a Promise you can chain another .then that will work on the result of the previous one. It's easier to read and to debug.
I want to map all the issue titles for a repo and render them to li in a react component. I've been able to extract only the issue title using octokat library but unfortunately that library does not play nice with some other stuff i've got going on. Also, I'm sure i can do this with es6 and the fetch api.
Original Post:
Been having a hellava time finding info on using es6 fetch / promises with the github api. I'm trying to fetch issues for a repo but i'm obviously missing something... I've used a few different libraries to try and accomplish this but I'd like to just use fetch.
Update: Now my new goal is merely to console.log the titles... baby steps.
import React from "react";
export default class extends React.Component {
constructor() {
super()
this.state = {
issues: []
}
}
componentWillMount() {
// let issueArry = []
const url = "https://api.github.com/repos/fightplights/chode-stream/issues"
fetch(url)
.then(response => response) // i've tried with and without .json()
.then(body => console.log(body))
// this logs the same response
}
render() {
return (
<div>
<ul>
{here i will map this.state.issues (once i can get them =))}
</ul>
</div>
)
}
}
I know it's a simple error on my part. I'm still a fledgling. =)
...and obviously i need to render to the dom (not shown here)
#Andy_D is right that I wasn't parsing the body of the response, only the response itself (doh!) however now that i'm trying to data.map(issue => ...) I still get the error that data.map() is not a function. This leads me to believe that the data object is not the object the droids are looking for... hand waves in front of screen
Here's the response object in the first promise:
Response {
type: "cors",
url: "https://api.github.com/repos/fightp…",
redirected: false,
status: 200,
ok: true,
statusText: "OK",
headers: Headers,
bodyUsed: false
}
But when I take that response in the next
.then(data => console.log(data))
It is undefined...
I have tried returning the first response => response.json() (as andy suggested) but it's already json... am i wrong?
You need to read the JSON from the body of the response, what you are attempting to render is the full response body.
So:
fetch(url)
.then(response => response.json())
.then(data => data.map(...)
response.json() returns a promise, so you can .then it, the return value (data) will be the JS object/array you're looking for.
https://developer.mozilla.org/en-US/docs/Web/API/Body/json
I am building my first React Native app and use Redux for the data flow inside my app.
I want to load some data from my Parse backend and display it on a ListView. My only issues at the moment is that for some reason, the request that I create using fetch() for some reason isn't actually fired. I went through the documentation and examples in the Redux docs and also read this really nice blog post. They essentially do what I am trying to achieve, but I don't know where my implementation differs from their code samples.
Here is what I have setup at the moment (shortened to show only relevant parts):
OverviewRootComponent.js
class OverviewRootComponent extends Component {
componentDidMount() {
const { dispatch } = this.props
dispatch( fetchOrganizations() )
}
}
Actions.js
export const fetchOrganizations = () => {
console.log('Actions - fetchOrganizations');
return (dispatch) => {
console.log('Actions - return promise');
return
fetch('https://api.parse.com/1/classes/Organization', {
method: 'GET',
headers: {
'X-Parse-Application-Id': 'xxx',
'X-Parse-REST-API-Key': 'xxx',
}
})
.then( (response) => {
console.log('fetchOrganizations - did receive response: ', response)
response.text()
})
.then( (responseText) => {
console.log('fetchOrganizations - received response, now dispatch: ', responseText);
dispatch( receiveOrganizations(responseText) )
})
.catch( (error) => {
console.warn(error)
})
}
}
When I am calling dispatch( fetchOrganizations() ) like this, I do see the logs until Actions - return promise, but it doesn't seem to actually to fire off the request. I'm not really sure how how I can further debug this or what resources to consult that help me solve this issue.
I'm assuming that Redux is expecting a Promise rather than a function.. Is that true?
If so, I think your return function may not be working.
You have a new line after your return, and it's possible JavaScript is (helpfully) inserting a semicolon there.
See here: Why doesn't a Javascript return statement work when the return value is on a new line?