如何在 React 中管理来自父组件的列表并呈现它？

Question

我有一个 reactjs 应用程序。在此我想管理来自父组件的列表。此应用程序可以将对象添加到列表、从列表中删除它并在 table.

中显示添加的对象

我的问题是我可以添加对象，但必须刷新列表中显示的整个页面。两种方式绑定不起作用，我不知道如何实现它。我希望你能帮助我。

class Wrap extends React.Component{

    constructor(){
        super();
        this.state = {
            player: []
        };

    }

    render(){
        return(
        <div id ="wrapperComponent">
            <Table/>
            <Create />
        </div>
        );
    }
}

class Table extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      player: []
    };
    this.deletePlayer = this.deletePlayer.bind(this);
  }

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

  deletePlayer(id) {
     fetch(`http://localhost:8081/player/${id}`, {
      method: 'DELETE',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then(() => {
      let updatedPlayers = [...this.state.player].filter(i => i.id !== id);
      this.setState({player: updatedPlayers});
    });
  }

class Create extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      ownerid: ''
    };
  }
  onChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value;
    this.setState(state);
  }

  onSubmit = (e) => {
    e.preventDefault();

    const { name, ownerid} = this.state;

    axios.post('http://localhost:8081/player', { name, ownerid})
    .then(() => this.setState(() => ({
    })))
  }
```

Answer 1

在父组件的方法中添加您的 .get 调用并将其作为道具传递。用它来刷新您的列表。

    class Wrap extends React.Component {

        constructor() {
            super();
            this.state = {
                players: []
            };
        }
        getData = () => {
            axios.get('http://localhost:8081/player')
            .then(res => {
                this.setState({ players: res.data });
            });
        }


removePlayerFromState = (id) => {
    let updatedPlayers = [...this.state.players].filter(i => i.id !== id);
  this.setState({players: updatedPlayers});
    }
        render() {
            return (
                <div id="wrapperComponent">
                    <Table getData={this.getData} players={this.state.players} removePlayerFromState={this.removePlayerFromState}/>
                    <Create getData={this.getData}/>
                </div>
            );
        }
    }
    class Table extends React.Component {
        // use this.props.players
    }
    class Create extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                name: '',
                ownerid: ''
            };
        }
        onChange = (e) => {
            const state = this.state
            state[e.target.name] = e.target.value;
            this.setState(state);
        }

        onSubmit = (e) => {
            e.preventDefault();

            const { name, ownerid } = this.state;

            axios.post('http://localhost:8081/player', { name, ownerid })
                .then(() => this.props.getData())
        }
    }

如何在 React 中管理来自父组件的列表并呈现它？

How can I manage a list from Parent component in React and render it?

children

communication

parent

dom-events

reactjs