我正在使用我的React app运行lint,我收到此错误:
error JSX props should not use arrow functions react/jsx-no-bind
Run Code Online (Sandbox Code Playgroud)
这就是我正在运行箭头功能(内部onClick
)的地方:
{this.state.photos.map(tile => (
<span key={tile.img}>
<Checkbox
defaultChecked={tile.checked}
onCheck={() => this.selectPicture(tile)}
style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
/>
<GridTile
title={tile.title}
subtitle={<span>by <b>{tile.author}</b></span>}
actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
>
<img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
</GridTile>
</span>
))}
Run Code Online (Sandbox Code Playgroud)
这是一个应该避免的不良做法吗?什么是最好的方法呢?
我在ReactJS中做一个简单的事情时收到错误"TypeError:无法读取未定义的属性'setState'.我正在尝试使用axios来填充带有响应数据的输入.到目前为止没有成功.我对axios和ReactJs都很新,所以它可能是我忽略的非常简单的东西?
在修复TypeError之后,我希望"RESPONSE TEXT"显示在表单的输入字段中.
这是我的组成部分:
class BasicInfoBlock extends React.Component {
constructor(props) {
super(props);
this.state = { name : "EventTestName" };
}
componentDidMount() {
axios
.get(getBaseUrl()+`get`)
.then(function (response) {
this.setState({name: "RESPONSE TEXT"});
//this.setState({name: response.data.name});
})
.catch((e) =>
{
console.error(e);
});
//this.setState({});
}
render(){
return(
<form className="form-horizontal">
<div className="form-group">
<label htmlFor="eventName" className="col-sm-2 control-label">Name</label>
<div className="col-sm-10">
<input type="text" id="eventName" className="form-control" placeholder="Event name" defaultValue={this.state.name}/>
</div>
</div>
</form>
);
}
}
Run Code Online (Sandbox Code Playgroud)
}
谢谢您的帮助
编辑:这不是一个重复的问题,这个问题涉及'this'在回调中不可用.选为重复的问题与bind有关.
出于某种原因,我收到错误"React-无法读取未定义的属性'setState'".因此,this.state永远不会使用用户输入的值进行更新.当我尝试注释掉的绑定时,我得到了奇怪的行为,我无法输入用户名的输入,我不再得到null错误,但值只是未定义.任何帮助,将不胜感激.谢谢.
import __fetch from "isomorphic-fetch";
import React from "react";
import InlineCss from "react-inline-css";
import Transmit from "react-transmit";
import Header from './components/header'
class Registration extends React.Component {
componentWillMount () {
if (__SERVER__) {
console.log("Hello server from Registration");
}
if (__CLIENT__) {
console.log("Hello Registration screen");
}
}
constructor () {
super()
this.state = {
name: '',
password: ''
}
//this.onChangeName = this.onChangeName.bind(this);
//this.onChangePassword = this.onChangePassword.bind(this);
}
onChangeName(e) {
//this.state.name = e.target.name
this.setState({ name: e.target.name});
}
onChangePassword(e) {
//this.state.password = e.target.name
this.setState({ password: …
Run Code Online (Sandbox Code Playgroud) 我在尝试什么?
尝试在状态中设置输入类型文本的值
到目前为止我搜索了什么?
React - 未捕获类型错误:无法读取未定义的属性“setState”
但这并不能回答我的问题
错误详情
类型错误:无法读取未定义的属性(读取“setState”)
在函数setEmailVal中设置email的值时出现此错误
成分
import React from 'react';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {email: ""};
}
setEmailVal(val) {
this.setState({email: val.currentTarget.value});
}
render() {
return (
<input type="text" onChange={this.setEmailVal} value={this.state.email} />
);
}
}
export default Login;
Run Code Online (Sandbox Code Playgroud) 我正在更新要使用的React组件:
class SearchFilms扩展了React.Component
代替:
var SearchFilms = React.createClass({
当我运行这个时,我收到以下错误:"无法读取未定义的属性'setState'"
谁能建议我如何更新这个?
class SearchFilms extends React.Component {
//var SearchFilms = React.createClass({
getInitial() {
return {
userInput: ''
};
}
onChange(event) {
this.setState({
userInput: event.target.value
});
this.props.newVal(event.target.value);
}
render() {
var languages = ['Shutter Island', 'Inception', 'Titanic', 'Blood Diamond'];
return (
<div className="row" id="Nav">
<input type="text"
value={this.props.userInput}
onChange={this.onChange}
/>
</div>
)
}
}
Run Code Online (Sandbox Code Playgroud) 请问我的反应类有这个问题,我正在尝试更新我的状态,但我得到这个错误"无法读取属性'setState'的未定义"..我已经尝试过在线的每个解决方案,但没有运气
这是代码
export default class PageBackground extends Component{
constructor(props) {
super(props);
this.state={
lat :'nothing',
longi :''
};
this.getLocation=this.getLocation.bind(this);
}
componentWillMount() {
this.getLocation();
}
getLocation () {
fetch('http://freegeoip.net/json/')
.then((res)=>res.json())
.then(function (objec){this.setState({lat:objec.latitude,longi:objec.longitude});})
.catch((err)=>console.log("didn't connect to App",err))
console.log(this.state.lat)
}
render(){
return(
<p>{this.state.lat}</p>
)
}
}
Run Code Online (Sandbox Code Playgroud) import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import videoDetails from './components/listvideos';
class YoutubeApp extends Component {
constructor(props){
super(props)
this.state = {
videos:[]
};
this.apiCall('surfing');
}
apiCall(term){
const params = {
part: 'snippet',
key:APP_KEY,
q:term,
type: 'video'
};
axios.get(APP_URL, { params: params})
.then(function(response) {
this.setState({
videos:response
})
})
.catch(function(error) {
console.error(error);
});
}
render(){
return (
<div>
<videoDetails/>
</div>
)
}
}
ReactDOM.render(
<YoutubeApp/>,
document.getElementById('app')
)
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app">
</div>
Run Code Online (Sandbox Code Playgroud)
嗨,我正在尝试制作youtube克隆作为练习,我是一个初学者,但是我看不到为什么反应状态会给我一个问题,我正在尝试将状态设置为我的视频数组,以便可以将其传递给其他组件我没有包含api密钥或url,但是通过错误{无法读取未定义的属性'setState'}的方式非常可读
reactjs ×7
javascript ×4
ecmascript-6 ×2
axios ×1
babel ×1
components ×1
forms ×1
html ×1
jsx ×1
this ×1
webpack ×1