Question

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

我已经搜索了关于stackoverflow的以前的帖子，但是我发现的大多数解决方案都不能解决我的问题。

以下代码有效，但仅列出一条记录或替换每个表单提交中已经存在的显示数据。

这是我想要实现的目标。 如果我提交表格4次，应该显示4条记录对于实例

uid filename

1   macofile

2   johnfile

3   lukefile

4   tonyfile

但是此代码的作用是替换每个表单提交中已经存在的记录，并结果，它只显示一个记录

例如。在第四个表单提交中仅显示

4   tonyfile

在 angularjs 中，我使用类似push函数的功能按照以下代码实现我的目标

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

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

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

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

这是代码

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>
    );
  }
}

Answer 1

因为未将本地user定义为具有.push()函数的数组。

const users=this.state.users; users.push(res.data)，然后您可以将其替换为该状态的用户。

Answer 2

对我有用的是以下代码中的concat函数

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

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

谢谢

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

2 个答案: