React This.Setstate Is Not a Function

React this.setState is not a function

The callback is made in a different context. You need to bind to this in order to have access inside the callback:

VK.api('users.get',{fields: 'photo_50'},function(data){
if(data.response){
this.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(this.state.FirstName);
}

}.bind(this));

EDIT:
Looks like you have to bind both the init and api calls:

VK.init(function(){
console.info("API initialisation successful");
VK.api('users.get',{fields: 'photo_50'},function(data){
if(data.response){
this.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(this.state.FirstName);
}

}.bind(this));
}.bind(this), function(){
console.info("API initialisation failed");

}, '5.34');

TypeError this.setState is not a function

your problem is here:

this.setState={
users: {}
}

inside the constructor you are redefining the setState method, thats why is not a function, you are assigning an object to it.

React Hooks setState function is not a function error

You have to use the hook useState

 const [searchField, setSearchField] = usestate('');

React: TypeError: this.setState is not a function

There are two errors, the first one is related to this usage in the Header component. You can replace

nameParent(e) {

by

nameParent = (e) => {

to scope this to the class level.

The second error is caused by the Child component because it directly invokes the provided function:

<h1 onClick = {this.props.nameFn('Blue Black Green')}>

It should be refactored to the following to fix the error:

render() {                
return (
<h1 onClick = {() => this.props.nameFn('Blue Black Green')}>
Value from parent is = {this.props.name}
</h1>
)
}

ReactJS: Uncaught TypeError: this.setState is not a function

Everything is right with the code except onChange handler just small
modification to your onChange handler

onChange = e => {
const target = e.target;
const name = target.name;
this.setState({
...this.state,
data: {
...this.state.data,
[name]: target.value
}
});
};

Sorry I ignored onSubmit it should be like this

 onSubmit = () => {
const errors = this.validate(this.state.data);
this.setState({ errors });
};

And This should work !!

Make sure Component Look Like this

import React from "react";
import { Form, Button } from "semantic-ui-react";
import Validator from "validator";
import InlineError from "../messages/InlineError";

class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
data: {
email: "",
password: ""
},
loading: false,
errors: {}
};
}

onChange = e => {
const target = e.target;
const name = target.name;
this.setState({
...this.state,
data: {
...this.state.data,
[name]: target.value
}
});
};

onSubmit = () => {
const errors = this.validate(this.state.data);
this.setState({ errors });
};

validate = data => {
const errors = {};
if (!Validator.isEmail(data.email)) errors.email = "Invalid email.";
if (!data.password) errors.password = "Cannot be blank.";

return errors;
};

render() {
const { data, errors } = this.state;
return (
<Form onSubmit={this.onSubmit}>
<Form.Field>
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="me@example.com"
value={data.email}
onChange={this.onChange}
/>
</Form.Field>
{errors.email && <InlineError text={errors.email} />}
<Form.Field>
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
value={data.password}
onChange={this.onChange}
/>
{errors.password && <InlineError text={errors.password} />}
</Form.Field>

<Button primary>Login</Button>
</Form>
);
}
}

export default LoginForm;

React - TypeError: _this.setState is not a function

Functional components do not have lifecycle methods and... state :)

const NewItemForm = props => (
<Form onSubmit={props.send_form}>
<Form.Group>
<TextArea
placeholder='Name your first item here'
name='item_msg'
onChange={e => this.setState({ item_msg: e.target.value })} />
<Form.Button primary content='Create Item' />
</Form.Group>
</Form>
)

This won't work:

onChange={e => this.setState({ item_msg: e.target.value })} />

What you need is to pass callback:

const NewItemForm = props => (
<Form onSubmit={props.send_form}>
<Form.Group>
<TextArea
placeholder='Name your first item here'
name='item_msg'
onChange={props.onInputChange} />
<Form.Button primary content='Create Item' />
</Form.Group>
</Form>
)

class App extends Component {
constructor () {
super();
this.state = {
item_msg: ''
}

this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}

handleSubmit(e){
e.preventDefault();
console.log(this.state.item_msg);
}
handleInputChange(e) {
this.setState({ item_msg: e.target.value })
}

render() {
return (
<div className="App">
<MainHeaderr />
<Container>
<NewItemForm send_form={this.handleSubmit} onInputChange={this.handleInputChange} />
</Container>
</div>
);
}
}

I get where you are coming from, but NewItemForm will get transpiled to React Element so this will reference that Element, not the App component.

React without JSX

onClick setState is not a function

change this line

const Modal = (onClose) => {

to

const Modal = ({onClose}) => {

React handleChange throwing error this.setState is not a function

you can't update state like this.setState = {readItem: item}
setState is a function and should use like this.setState({items: filteredItems})

React: this.setState is not a function

this belongs to the closest function context, which in your case is read.onloadend = function()...NOT the class.

You can solve this problem by assigning the class-level this to a new variable before you enter that ad-hoc function:

openProject(FileObject) {
var read = new FileReader();
read.readAsBinaryString(FileObject);
var that = this;
read.onloadend = function() {
// ...
that.setState(/*... etc*/

And of course you'll want to change all instances of this within your onloadend callback function to that (or whatever variable name you choose).

*Edit: as @MDTabishMahfuz describes, you can also use an arrow function, because unlike the function declaration, an arrow function:

Does not have its own bindings to this or super



Related Topics



Leave a reply



Submit