如何在 React 中管理父组件中的列表并渲染它

Question

我有一个reactjs应用程序。在此，我想管理父组件中的列表。此应用程序可以将对象添加到列表中，将其从列表中删除并在表中显示添加的对象。

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

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 调用并将其作为 props 传递。使用它来刷新您的列表。

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