Javascript 在react js中传递和显示对象数组
我有两个输入框,可以从用户那里获取输入,点击一个按钮可以将输入保存在一个数组中并显示在屏幕上 我为此编写的react代码如下:Javascript 在react js中传递和显示对象数组,javascript,reactjs,reactive-programming,Javascript,Reactjs,Reactive Programming,我有两个输入框,可以从用户那里获取输入,点击一个按钮可以将输入保存在一个数组中并显示在屏幕上 我为此编写的react代码如下: class Todo extends React.Component{ constructor(props){ super(props); this.state={ input:[], desc:'', expense:'', list:[] } this.save=this.save.
class Todo extends React.Component{
constructor(props){
super(props);
this.state={
input:[],
desc:'',
expense:'',
list:[]
}
this.save=this.save.bind(this);
this.changeDesc=this.changeDesc.bind(this);
this.changeExpense=this.changeExpense.bind(this);
}
changeDesc(e){
this.setState({
desc:e.target.value
})
}
changeExpense(e){
this.setState({
expense:e.target.value
})
}
save(saveText){
var list=this.state.list;
list.push({
text:saveText,
})
this.setState({
list:list,
desc:'',
expense:''
})
//console.log(input);
}
render(){
return(
<div>
<Save saveText={this.save} text={this.state.input}/>
<Display list={this.state.list}/>
</div>
)
}
}
class Save extends React.Component{
constructor(props){
super(props);
this.state={
input:this.props.text
}
this.save=this.save.bind(this);
}
save(){
var input=this.state.input;
var desc=document.getElementById("desc").value;
var expense=document.getElementById("expense").value;
input.push(desc,expense);
this.props.saveText(input);
console.log(this.props.saveText);
this.setState({
input:[]
})
}
render(){
return(
<div>
<input type='text' id="desc" onChange={this.changeDesc}/>
<input type="text" id="expense" onChange={this.changeExpense}/>
<input type="button" value="save" onClick={this.save}/>
</div>
)
}
}
class Display extends React.Component{
constructor(props){
super(props);
this.state={
todos:[]
}
}
componentWillReceiveProps(nextProps){
this.setState({
todos:nextProps.list
})
}
render(){
var renderList=this.state.todos;
var listElements=[];
for(var i=0;i<renderList.length;i++){
listElements.push(renderList[i]);
console.log(listElements);
}
return(
<div>{listElements}</div>
)
}
}
ReactDOM.render(<Todo/>,document.getElementById('root'));
类Todo扩展React.Component{
建造师(道具){
超级(道具);
这个州={
输入:[],
描述:'',
费用:'',
名单:[]
}
this.save=this.save.bind(this);
this.changeDesc=this.changeDesc.bind(this);
this.changepance=this.changepance.bind(this);
}
changeDesc(e){
这是我的国家({
描述:e.target.value
})
}
变更费用(e){
这是我的国家({
费用:即目标价值
})
}
保存(保存文本){
var list=this.state.list;
list.push({
text:saveText,
})
这是我的国家({
列表:列表,
描述:'',
费用:''
})
//控制台日志(输入);
}
render(){
返回(
)
}
}
类Save.Component{
建造师(道具){
超级(道具);
这个州={
输入:this.props.text
}
this.save=this.save.bind(this);
}
保存(){
变量输入=this.state.input;
var desc=document.getElementById(“desc”).value;
var费用=document.getElementById(“费用”).value;
输入、推送(描述、费用);
this.props.saveText(输入);
console.log(this.props.saveText);
这是我的国家({
输入:[]
})
}
render(){
返回(
)
}
}
类显示扩展了React.Component{
建造师(道具){
超级(道具);
这个州={
待办事项:[]
}
}
组件将接收道具(下一步){
这是我的国家({
待办事项:nextrops.list
})
}
render(){
var renderList=this.state.todos;
var列表元素=[];
对于(var i=0;i您的列表包含一个对象文本数组,它本身就是一个字符串数组
您也可以简单地映射到它,而不是使用for循环
render(){
return(
<div>{this.state.todos.map((item) => (<div>{item.text[0] + ' ' + item.text[1]}</div>))}</div>
)
}
render(){
返回(
{this.state.todos.map((item)=>({item.text[0]+''+item.text[1]}))}
)
}
如果我映射到它,并且我执行item.desc和item.expense,那么为什么它会通过一个错误,因为最终TODO[]有两个对象desc和expense!不,您的TODO没有包含desc和expense的对象,但有一个对象文本是数组检查我修改了您的逻辑的新代码笔,将desc和expense作为一个对象:并且您没有在此缩小的错误您可以再次参考我的代码笔链接。我如何通过另一个comp传递相同的数据我再次收到相同的错误minify error,在您的示例中,您从显示组件返回了{listItems}
,React认为您可能返回了一个未定义的项,所以只需将其包装在div中,如{listItems}
我只编辑了您的代码笔,并做了一些更改,您可以进行修改