使用Reactjs在每个表单提交上显示Json响应数据

如何使用Reactjs列表记录每次表单提交时的响应

我已经在stackoverflow上搜索了以前的文章，但我找到的大多数解决方案并没有解决我的问题

下面的代码有效，但只列出一条记录或 替换每个表单提交上已存在的显示数据

以下是我想要实现的目标。 如果我提交表格4次，我应该显示4条记录 比如说

uid filename

1   macofile

2   johnfile

3   lukefile

4   tonyfile

但此代码所做的是替换每个表单提交和 因此，它只显示一条记录

在提交第四份表格时，仅显示

4   tonyfile

在angularjs中，我根据下面的代码使用推送功能来实现我的目标

$scope.users.push(res.data[0]);

const users = users.push(res.data);
//const users = users.push(res.data[0]);

  const users=this.state.users.concat(res.data);
   // const users=this.state.users.push(res.data);// does not work.

在reactjs中，如果我尝试下面的代码

$scope.users.push(res.data[0]);

const users = users.push(res.data);
//const users = users.push(res.data[0]);

  const users=this.state.users.concat(res.data);
   // const users=this.state.users.push(res.data);// does not work.

它将显示错误 无法读取未定义的属性“推送”

这是密码

import React, { Component } from "react";
import axios, { post } from "axios";

class FilePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      filename: "",
      loading: false,
      users: [],
      error: null
    };

    this.handleChange = this.handleChange.bind(this);
  }

  _handleSubmit(e) {
    e.preventDefault();

    //send it as form data
    const formData = new FormData();

    formData.append("filename", this.state.filename);

    //alert(this.state.filename);

    this.setState({ loading: true }, () => {
      axios
        .post("http://localhost/apidb_react/up.php", formData)
        .then(res => {

//const users = res.data;
//const users = users.push(res.data[0]);
const users = users.push(res.data);

        this.setState({ users,  loading: false });
/*
          this.setState({
            users: res.data,
            loading: false
          });
*/
        })
        .catch(err => {
          console.log(err.message);
        });
    });
  }

  // handle form submission
  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  render() {
    const { loading, users, error } = this.state;

    return (
      <div>
        <form onSubmit={e => this._handleSubmit(e)}>
          <b>filename:</b>
          <input
            tyle="text"
            className="form-control"
            value={this.state.filename}
            name="filename"
            onChange={this.handleChange}
          />

          <button
            className="submitButton"
            type="submit"
            onClick={e => this._handleSubmit(e)}
          >
            submit
          </button>
        </form>




<ul>
    {this.state.users.map((user, index) =>

         <option  key={user.uid}  value='{ user.uid }' > { user.uid } { user.filename}</option>  
 )}

      </ul>
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“axios”导入axios，{post}；
类FilePage扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
文件名：“”，
加载：false，
用户：[]，
错误：null
};
this.handleChange=this.handleChange.bind（this）；
}
_handleSubmit（e）{
e、 预防默认值（）；
//将其作为表单数据发送
const formData=new formData（）；
formData.append（“filename”，this.state.filename）；
//警报（this.state.filename）；
this.setState（{loading:true}，（）=>{
axios
.post（“http://localhost/apidb_react/up.php“，formData）
。然后（res=>{
//const users=res.data；
//const users=users.push（res.data[0]）；
const users=users.push（res.data）；
this.setState（{users，load:false}）；
/*
这是我的国家({
用户：res.data，
加载：错误
});
*/
})
.catch（错误=>{
控制台日志（错误消息）；
});
});
}
//处理表格提交
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
render（）{
const{loading，users，error}=this.state；
返回(
这个。_handleSubmit（e）}>
文件名：
这个._handleSubmit（e）}
>
提交

{this.state.users.map（（用户，索引）=>
{user.uid}{user.filename}
)}

);
}
}

因为本地

用户

未定义为具有

.push（）

功能的数组

const users=this.state.users

users.push（res.data）

然后您可以将其替换为处于该状态的用户

对我有效的是符合以下代码的concat函数

$scope.users.push(res.data[0]);

const users = users.push(res.data);
//const users = users.push(res.data[0]);

  const users=this.state.users.concat(res.data);
   // const users=this.state.users.push(res.data);// does not work.

因此，push（）不起作用，因为它返回扩展数组的长度，而不是数组本身

---

谢谢

如果我使用const users=this.state.users.push（res.data），我想你打算使用

this.state.users.push（…）

@Shawn；它显示了错误。TypeError:this.state.users.map不是FilePage.render上的函数在这种情况下，在创建错误的行之前，执行

console.log（JSON.stringify（this.state））

，因为以前的设置状态（…）调用更改了

users

的形状，使其不再是数组，因此无法在非数组上使用map函数。如果我使用const users=this.state.users.push（res.data）；它显示了错误。TypeError:this.state.users.map不是FilePage.renderThis不是我在回答中写的函数，请仔细阅读。先生，push（）不起作用，因为它返回扩展数组的长度，而不是数组本身。Concat方法对我很有效。顺便说一句，

concat

返回一个新列表，而

push

修改现有列表。所以，给出的答案也适用于你，如果你在回答中给出的两种不同的陈述中这样做的话。