Question

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

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

注意：-，当我尝试重定向到其他组件时，请说Home（“ /”）。一切正常。

任何帮助将不胜感激。

谢谢

ListEnterprise

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;

App.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>
    );
  }
}

Answer 1

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

在您的父组件中，将_showMessage作为prop传递给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中，我们将状态用于此类事情，您不能总是重定向

希望有帮助

Answer 2

在这种情况下，Redux将是最佳选择，但我们仍然可以单独使用React来实现。

您应该在addEnterprise组件中定义EnterpriseList函数，并通过props将其传递给AddEnterprise组件。

然后在addEnterprise中，当新添加成功时，呼叫refreshEnterprises。

如何将其从React Js中的组件重定向到同一组件

2 个答案: