Question

我只是想出了如何获取数据并将其发布到数据库。页面渲染时，数据显示在列表中。我希望列表在提交表单输入时重新呈现。到目前为止，我必须手动刷新页面才能使新项目显示在列表中。

我已经尝试在handleSubmit函数中创建状态更改。似乎什么都没发生。

handleSubmit(event) {
  event.preventDefault();
  fetch('http://localhost:5000/api/listitems', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
     body: JSON.stringify( {
        //ID : this.state.id,
        Content: this.state.content,
        List_Group: this.state.listgroup,
        Date_Added: this.state.date
      })
    })
    .then(res => res.json())
    .catch(err => console.log(err));
}

下面是表单和列表代码

     <h1>Submit an Item</h1>
      <form onSubmit={this.handleSubmit} style={formStyle}>
        <label>
          Content:
          <input type="text" value={this.state.content} onChange= 
          {this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <h1>Grocery List</h1>
      {this.state.items.map(
        (item, i) => 
          <p key={i}>{item.List_Group}: {item.Content}</p>
        )}

列表应在提交后自动显示新项目。

Answer 1

请记住，我对React的实践知识为零，在我看来，您只需要更新this.state.items数组即可。

我假设您的组件具有某种loadItems方法，所以我想说您的then应该看起来更像.then(() => this.loadItems())

已更新：

  //fetch data from server
  handleData = () => {
    fetch('http://localhost:5000/api/listitems')
       .then(response => response.json())
       .then(data => this.setState({ items: data }));
  }

  //call handleData() on page load
  componentDidMount() {
    this.handleData();
  }

  //this function fires when form is submited
  handleSubmit(event) {
    event.preventDefault();
    fetch('http://localhost:5000/api/listitems', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
     body: JSON.stringify( {
        Content: this.state.content,
        List_Group: this.state.listgroup,
        Date_Added: this.state.date
      })
    })
    .then(res => res.json())
    .then(() => this.setState({content: ''}))
    //call handleData() when form is submited, which reloads list
    .then(() => this.handleData())
    .then(console.log(this.state.items))
    .catch(err => console.log(err));
  }

因此handleData（）从服务器获取了数据。在componentDidMount（）中调用它以进行初始页面加载。然后，每次窗体调用handleSubmit（）函数时，都会再次调用它。每次调用handleData（）时，它都会重新呈现该列表。

Answer 2

在获得响应后设置项目列表的状态。在这里，我假设您正在响应整个列表。

handleSubmit(event) {
event.preventDefault();
fetch('http://localhost:5000/api/listitems', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
 body: JSON.stringify( {
    //ID : this.state.id,
    Content: this.state.content,
    List_Group: this.state.listgroup,
    Date_Added: this.state.date
  })
})
.then(res => res.json())
.then(data => this.setState({items : data})
.catch(err => console.log(err));
}

Answer 3

您需要调用this.setState。状态更新会触发重新呈现。

handleSubmit(event) {
  event.preventDefault();
  fetch('http://localhost:5000/api/listitems', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
     body: JSON.stringify( {
        //ID : this.state.id,
        Content: this.state.content,
        List_Group: this.state.listgroup,
        Date_Added: this.state.date
      })
    })
    .then(res => {
      // depending on the response you may need to extract the property here
      this.setState({
         items: res.json(),
      });
    })
    .catch(err => console.log(err));
}

Answer 4

您可以这样做：

handleSubmit(event) {
  event.preventDefault();
  fetch('http://localhost:5000/api/listitems', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
     body: JSON.stringify( {
        //ID : this.state.id,
        Content: this.state.content,
        List_Group: this.state.listgroup,
        Date_Added: this.state.date
      })
    })
    .then(res => res.json())
    .then((items) => this.setState({items: items})) // keep in mind that you may have to transform items to appropriate format to display
    .catch(err => console.log(err));
}

在React.js中提交表单时如何自动重新呈现列表

4 个答案: