javascript - 为什么我的组件在将数据发布到 REST 服务后不更新

Question

所以我正在尝试构建我的第一个 react.js 应用程序，我想知道，为什么我的页面在通过 axios 向我的应用程序发布新播放器后既不更新，也不在删除播放器后更新。当我之后刷新页面时，玩家会根据操作创建或消失。所以 API 部分工作正常。

我有一个像这样的 PlayerPage.js:

PlayerPage.js

import React, { Component } from 'react';
import axios from 'axios';
import PlayerForm from './playerform';
import PlayCard from './playercard';

class PlayerPage extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    players: []
  };

  componentDidMount() {
    axios
      .get('http://localhost:3001/player')
      .then(res => {
        const players = res.data;
        this.setState({ players });
      })
      .catch(console.log);
  }

  render() {
    return (
      <div>
        <h2>Add Player</h2>
        <PlayerForm />
        <hr></hr>
        <h2>Available Player</h2>
        {this.state.players.map(player => (
          <PlayCard player={player} key={player.id} />
        ))}
      </div>
    );
  }
}

export default PlayerPage;

它确实引用(并从 API 填充)PlayerForm 和 PlayerCard 组件，如下所示:

playerform.js

import React, { Component } from 'react';
import axios from 'axios';
import {
  FormControl,
  FormGroup,
  FormLabel,
  Form,
  Button
} from 'react-bootstrap';

class PlayerForm extends Component {
  state = {
    name: '',
    nickname: ''
  };

  handleSubmit = e => {
    e.preventDefault();
    axios
      .post('http://localhost:3001/player', JSON.stringify(this.state), {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        }
      })
      .then()
      .catch(err => console.log(err));
  };

  handelChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormGroup>
          <FormLabel>Name</FormLabel>
          <FormControl
            type="text"
            name="name"
            placeholder="Enter player name"
            onChange={this.handelChange.bind(this)}
          />
        </FormGroup>
        <FormGroup>
          <FormLabel>Nickname</FormLabel>
          <FormControl
            type="text"
            name="nickname"
            placeholder="Enter player nickname"
            onChange={this.handelChange.bind(this)}
          />
        </FormGroup>
        <Button variant="btn btn-primary" type="submit">
          Add
        </Button>
      </Form>
    );
  }
}

export default PlayerForm;

和playercard.js:

import React, { Component } from 'react';
import { Card, Button } from 'react-bootstrap';
import PropTypes from 'prop-types';
import axios from 'axios';

class PlayerCard extends Component {
  constructor(props) {
    super(props);
    this.player = props.player;

    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    axios
      .delete(`http://localhost:3001/player/${this.player.id}`)
      .then()
      .catch(console.log);
  }
  render() {
    return (
      <Card className="flex-row flex-wrap">
        <Card.Header>
          <Card.Img variant="left" src="https://via.placeholder.com/150" />
        </Card.Header>
        <Card.Body variant="center">
          <Card.Title>{this.player.name}</Card.Title>
          <Card.Subtitle>{this.player.nickname}</Card.Subtitle>
        </Card.Body>
        <Card.Body variant="right">
          <Button variant="btn btn-primary" onClick={this.handleClick}>
            Delete
          </Button>
        </Card.Body>
      </Card>
    );
  }
}

PlayerCard.propTypes = {
  player: PropTypes.object.isRequired
};

export default PlayerCard;

那么问题来了，为什么我这边更新不正常？我很感激任何提示。提前致谢。

奖励问题:如何根据节点服务器的运行位置动态获取 ip 和端口？

Answer 1

为什么它不起作用:

因为您在提交表单时并没有刷新 ListView 。React 并不神奇，您需要告知何时要重新渲染 View 。

一种方法是将 onCreate Prop 添加到您的 playerform.js 并在成功提交表单时运行该函数。

import React, { Component } from 'react';
import axios from 'axios';
import PlayerForm from './playerform';
import PlayCard from './playercard';

class PlayerPage extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    players: []
  };

  loadPlayers() {
    axios
      .get('http://localhost:3001/player')
      .then(res => {
        const players = res.data;
        this.setState({ players });
      })
      .catch(console.log);
  }

  componentDidMount() {
    this.loadPlayers();
  }

  render() {
    return (
      <div>
        <h2>Add Player</h2>
        <PlayerForm onCreate={() => this.loadPlayers()}/>
        <hr></hr>
        <h2>Available Player</h2>
        {this.state.players.map(player => (
          <PlayCard player={player} key={player.id} />
        ))}
      </div>
    );
  }
}

export default PlayerPage;

import React, { Component } from 'react';
import axios from 'axios';
import {
  FormControl,
  FormGroup,
  FormLabel,
  Form,
  Button
} from 'react-bootstrap';

class PlayerForm extends Component {
  state = {
    name: '',
    nickname: ''
  };

  handleSubmit = e => {
    e.preventDefault();
    axios
      .post('http://localhost:3001/player', JSON.stringify(this.state), {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        }
      })
      .then(() => {
        this.props.onCreate();
      })
      .catch(err => console.log(err));
  };

  handelChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormGroup>
          <FormLabel>Name</FormLabel>
          <FormControl
            type="text"
            name="name"
            placeholder="Enter player name"
            onChange={this.handelChange.bind(this)}
          />
        </FormGroup>
        <FormGroup>
          <FormLabel>Nickname</FormLabel>
          <FormControl
            type="text"
            name="nickname"
            placeholder="Enter player nickname"
            onChange={this.handelChange.bind(this)}
          />
        </FormGroup>
        <Button variant="btn btn-primary" type="submit">
          Add
        </Button>
      </Form>
    );
  }
}

export default PlayerForm;

我没有检查 Prop 是否存在，但通常你应该检查。

如何处理API路由

你应该使用环境变量:

.env

API_HOST=http://localhost:3001/

process.env.API_HOST

但这取决于你的开发环境。