reactjs - 如何将它从 React Js 中的组件重定向到同一个组件

问题描述

我有一个名为ListEnterprise的组件，它负责呈现和显示数据库中的数据。在这个组件上，我正在调用另一个组件AddEnterprise以获取 POST 请求以将数据更新到数据库中，并将其重定向到ListEnterprise组件以呈现更新的数据。数据库中的数据正在更新，但没有发生重定向。

基本上，我在ListEnteprise组件上，调用 AddEnterprise 组件并尝试将其重定向到未发生的ListEnterprise 。

注意：-当我尝试重定向到其他组件时，可以说 Home("/")。它工作正常。

任何帮助将不胜感激。

谢谢

列表企业

class ListEnterprises extends Component {


    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            enterprises: [],
            message: null,
            showFormMessage: false,
        }
        //Any method in a react component should be bound to this
        this.refreshEnterprises = this.refreshEnterprises.bind(this);
    }

    // After all the elements of the page is rendered correctly, this method is called.
    // After the markup is set on the page, this technique called by React itself to either fetch the data from An External API or perform some unique operations which need the JSX.API
    // componentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render() the updated data loaded JSX. For example, we are going to fetch any data from an API then API call should be placed in this lifecycle method,
    // and then we get the response, we can call the setState() method and render the element with updated data.
    //React defines a component lifecycle. componentDidMount will be called as soon as the component is mounted. We are calling refreshCourses as soon as a component is mounted.
    componentDidMount() {
        this.refreshEnterprises();
    }

    _showMessage = (bool) => {
        this.setState({
            showFormMessage: bool
        });
    }

    refreshEnterprises() {
        EnterpriseService.retrieveAllEnterprises()
            .then((response) => {
                console.log(response.data);
                this.setState({ enterprises: response.data, isLoading: false });
            }).catch((error) => {
                console.log(error);
            });
    }

    removeEnterprise(id) {
        EnterpriseService.deleteEnterprise(id)
            .then((response) => {
                console.log(response.data);
                let updatedEnterprises = [...this.state.enterprises].filter(i => i.id !== id);
            }).catch((error) => {
                console.log(error);
            });
    }
    render() {
        console.log("Rendering Enterprises");

        if (this.state.isLoading)
            return (<div>Loading...</div>);

        return (
            <div key={this.props.location.pathname}>
                <NavigationComponent /><br /><br />
                <h3 align="center">Here are all your Enterprises</h3><br />
                {this.state.message && <div class="alert alert-success">{this.state.message}</div>}
                <Container>
                    <Table striped bordered hover size="sm">
                        <thead>
                            <tr>
                                <th>Enterprise</th>
                                <th>Industry</th>
                                <th>Description</th>
                                <th>Update</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.enterprises.map(
                                    enterprise =>
                                        <tr key={enterprise.id}>
                                            <td>{enterprise.enterpriseName}</td>
                                            <td>{enterprise.industry}</td>
                                            <td>{enterprise.description}</td>
                                            <td><button className="btn btn-warning" onClick={() => this.updateEnterprise(enterprise.id)} >Update</button></td>
                                            <td><button className="btn btn-danger" onClick={() => this.removeEnterprise(enterprise.id)}>Delete</button></td>
                                        </tr>
                                )
                            }
                        </tbody>
                    </Table>
                </Container>{" "}{" "}{" "}

                <div className="container">
                    <Button color="primary" size="lg" onClick={this._showMessage.bind(null, true)}>Add Enterprise</Button>{' '}
                    <Button color="secondary" size="lg" onClick={this._showMessage.bind(null, false)}>Hide</Button>{' '}
                    {/* {this.state.showFormMessage && (<AddEnterprise {...this.props} containerRef={ref => (this.current = ref)} />)} */}
                    {/* /console.log(this.props); */}
                    {this.state.showFormMessage && (<AddEnterprise  {...this.props} />)}
                </div>
                <FooterComponent />
            </div >
        );
    }
}

export default ListEnterprises;

添加企业

class AddEnterprise extends Component {

    emptyEnterprise = {
        enterpriseName: "",
        industry: "",
        description: ""
    };

    constructor(props) {
        super(props);

        this.state = {
            isLoading: true,
            isForm: false,
            enterprisePayload: this.emptyEnterprise
        }

        this.handleChange = this.handleChange.bind(this);
        this.addEnterprise = this.addEnterprise.bind(this);
    }

    handleChange(event) {
        const target = event.target;

        const value = target.value;
        const name = target.name;

        let updatedEnterprisePayload = { ...this.state.enterprisePayload };
        updatedEnterprisePayload[name] = value;
        this.setState({ enterprisePayload: updatedEnterprisePayload });
        console.log(updatedEnterprisePayload);
    }

    addEnterprise(event) {
        const payload = this.state.enterprisePayload;
        EnterpriseService.addEnterprise(payload)
            .then((response) => {
                this.setState({ isLoading: false, isForm: true });
                //event.peventDefault();
                this.props.history.push("/enterprises");
            })
            .catch((error) => {
                console.log(error);
            });
    }

    render() {

        if (this.state.isLoading && this.state.isForm)
            return (<div>Loading...</div>);

        return (
            <div className="base-container">
                <div className="header"><div><br />Add Enterprise</div></div>
                <div className="content">
                    <div className="form">
                        <div className="form-group">
                            <label htmlFor="enterpriseName" for="enterpriseName">Enterprise Name</label>
                            <input type="text" name="enterpriseName" id="enterpriseName" placeholder="enterpriseName" onChange={this.handleChange} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="industry" for="industry">Industry</label>
                            <input type="text" name="industry" id="industry" placeholder="industry" onChange={this.handleChange} />
                        </div>
                        <div className="form-group">
                            <label htmlFor="description" for="description">Description</label>
                            <input type="text" name="description" id="description" placeholder="description" onChange={this.handleChange} />
                        </div>
                    </div>
                </div>
                <div className="footer">
                    <button type="button" className="btn" onClick={this.addEnterprise}>Add</button>
                </div>
            </div>
        );
    }
}
//export default withRouter(connect(mapStateToProps)(AddEnterprise));
export default AddEnterprise;

应用程序.js

class App extends Component {
  state = {}
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/" exact={true} component={Home} />
          <Route path="/enter" exact={true} component={EnterSystem} />
          <Route path="/enterprises" exact={true} component={ListEnterprises} />
          // {/* <Route path='/categories' exact={true} component={Category} /> */}
          {/* <Route path='/expenses' exact={true} component={Expenses} /> */}
        </Switch>
      </Router>
    );
  }
}

标签： reactjsreact-router

您需要将回调传递给您的 AddEnterprise 组件以更新父状态，您可以执行以下操作。

在您的父组件中，将 _showMessage 作为道具传递给 AddEnterprise

{this.state.showFormMessage && (<AddEnterprise showMessage={this._showMessage}  {...this.props} />)}

并将您的 _showMessage 更改为

_showMessage = (bool, update=false) => {
    this.setState({
        showFormMessage: bool
    });
    if (update) {
      this.refreshEnterprises();
    }
}

并在您的 AddEnterprise 中执行

addEnterprise(event) {
    const payload = this.state.enterprisePayload;
    EnterpriseService.addEnterprise(payload)
        .then((response) => {
            this.setState({ isLoading: false, isForm: true });
            //event.peventDefault();
            this.props.showMessage(false, true); // to refresh parent call
        })
        .catch((error) => {
            console.log(error);
        });
}

在 React 中，我们使用状态来处理这些事情，你不能总是重定向

希望能帮助到你

reactjs - 如何将它从 React Js 中的组件重定向到同一个组件

问题描述

解决方案

推荐阅读