reactjs - 使用 react 路由器重定向后重新渲染组件

Question

我正在使用 laravel 和 react 制作一个 CRUD 应用程序，在我的表单组件中“POST”之后我想重定向到我的主页，经过一些搜索我找到了 Redirect 组件并且它工作但每次它都重定向我对于我的主页组件，它没有重新渲染，所以在我刷新之前我看不到我的新“文章”。这是 Index.js

 import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

import Cards from './Cards';
import Navbar from './Navbar';
import FromProduct from './FromProduct';
export default class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "",
            description: "",
            image: "",
            price: "",
            data: []
        };
        this.fetchAllProduct = this.fetchAllProduct.bind(this);
    }
    componentDidMount() {
        this.fetchAllProduct();
    }
    fetchAllProduct() {
        fetch("api/products")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    data
                })
            })
    }
    render() {
        const { data } = this.state;
        return (
            <Router>
                <Navbar />
                <Switch>
                    <Route exact path="/">
                        <Cards data={data} />
                    </Route>
                    <Route exact path="/create">
                        <FromProduct />
                    </Route>
                </Switch>
            </Router>
        )
    }
}
if (document.getElementById('root')) {
    ReactDOM.render(<Index />, document.getElementById('root'));
}

和 FromProduct.js

import React, { Component } from 'react';
import { Redirect } from "react-router";
import '../../sass/formProduct.scss';

export default class FromProduct extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "",
            description: "",
            image: "",
            price: "",
            redirect:false
        };
      //  this.postProduct = this.postProduct.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(evt) {
        const value = evt.target.value;
        this.setState({
          [evt.target.name]: value
        });
      }
    handleSubmit(){
        event.preventDefault();
        this.postProduct();

    }
    postProduct(){
        fetch("api/products",{
            method:"POST",
            headers:{
                "Content-Type":"application/json",
                "Accept":"application/json"
            },
            body:JSON.stringify({
                title:this.state.title,
                description:this.state.description,
                price:this.state.price,
                image:"image"
            })
        })
        .then(response => this.setState({redirect:!this.state.redirect}))
    }

    render() {
        return (
            !this.state.redirect ? 
            <div className="container">
                <h1>&bull; Keep in Touch &bull;</h1>
                <div className="underline">
                </div>
                <div className="icon_wrapper">
                    <svg className="icon" viewBox="0 0 145.192 145.192">
                        <path d="M126.82,32.694c-2.804,0-5.08,2.273-5.08,5.075v2.721c-1.462,0-2.646,1.185-2.646,2.647v1.995    c0,1.585,1.286,2.873,2.874,2.873h20.577c1.462,0,2.646-1.185,2.646-2.647v-3.041c0-1.009-0.816-1.825-1.823-1.825v-2.722    c0-2.802-2.276-5.075-5.079-5.075h-1.985v-3.829c0-3.816-3.095-6.912-6.913-6.912h-0.589h-20.45c0-2.67-2.164-4.835-4.833-4.835    H56.843c-2.67,0-4.835,2.165-4.835,4.835H34.356v-3.384h-9.563v3.384v1.178h-7.061v1.416c-2.67,0.27-10.17,1.424-13.882,5.972    c-1.773,2.17-2.44,4.791-1.983,7.793c0.463,3.043,1.271,6.346,2.128,9.841c2.354,9.616,5.024,20.515,0.549,28.077    C2.647,79.44-3.125,90.589,2.201,99.547c4.123,6.935,13.701,10.44,28.5,10.44c1.186,0,2.405-0.023,3.658-0.068v9.028h-0.296    c-2.516,0-4.558,2.039-4.558,4.558v4.566h100.04v-4.564c0-2.519-2.039-4.558-4.558-4.558h-0.297V84.631h0.297    c2.519,0,4.558-2.037,4.558-4.556v-0.009c0-2.516-2.039-4.556-4.556-4.556l-36.786-0.009V61.973c0-2.193-1.777-3.971-3.972-3.971    v-4.711h0.456c1.629,0,2.952-1.32,2.952-2.949h14.227V34.459h1.658c2.672,0,4.834-2.165,4.834-4.834h20.45v3.069H126.82z     M34.06,75.511c-2.518,0-4.558,2.04-4.558,4.556v0.009c0,2.519,2.042,4.556,4.558,4.556h0.296v24.12l-0.042-1.168    c-15.994,0.574-26.122-2.523-30.106-9.229C-0.464,90.5,4.822,80.347,6.55,77.423c4.964-8.382,2.173-19.774-0.29-29.825    c-0.843-3.442-1.639-6.696-2.088-9.638c-0.354-2.35,0.129-4.3,1.484-5.958c3.029-3.714,9.509-4.805,12.076-5.1v1.233h7.061v1.49    v2.684c-2.403,1.114-4.153,2.997-4.676,5.237H18.15c-0.584,0-1.056,0.474-1.056,1.056v0.83c0,0.584,0.475,1.056,1.056,1.056h1.984    c0.561,2.18,2.304,3.999,4.658,5.092v0.029c0,0-2.282,20.823,16.479,22.099v1.102c0,1.177,0.955,2.133,2.133,2.133h3.297    c1.178,0,2.133-0.956,2.133-2.133V50.135c0-1.177-0.955-2.132-2.133-2.132h-3.297c-1.178,0-2.133,0.955-2.133,2.132    c-1.575-0.235-5.532-1.17-6.635-4.547c2.36-1.092,4.109-2.913,4.669-5.097h1.308c0.722,0,1.309-0.584,1.309-1.308v-0.578    c0-0.584-0.475-1.056-1.056-1.056h-1.539c-0.542-2.332-2.416-4.271-4.968-5.363v-2.559h17.651c0,2.67,2.166,4.835,4.836,4.835 h2.392v15.88h13.639c0,1.629,1.321,2.949,2.951,2.949h0.899v4.711c-2.194,0-3.972,1.778-3.972,3.971v13.529L34.06,75.511z     M95.188,101.78c0,8.655-7.012,15.665-15.664,15.665c-8.653,0-15.667-7.01-15.667-15.665c0-8.647,7.014-15.664,15.667-15.664    C88.177,86.116,95.188,93.132,95.188,101.78z M97.189,45.669h-9.556c0-0.896-0.726-1.62-1.619-1.62H74.494    c-0.896,0-1.621,0.727-1.621,1.62h-8.967v-11.21h33.283V45.669z"></path>
                        <path d="M70.865,101.78c0,4.774,3.886,8.657,8.66,8.657c4.774,0,8.657-3.883,8.657-8.657c0-4.773-3.883-8.656-8.657-8.656    C74.751,93.124,70.865,97.006,70.865,101.78z"></path>
                    </svg>
                </div>
                <form onSubmit={this.handleSubmit} className="contact_form">
                    <div className="title">
                        <label ></label>
                        <input type="text"
                            value={this.state.title}
                            onChange={this.handleChange}
                            placeholder="products title is"
                            name="title"  />
                    </div>
                    <div className="price">
                        <label ></label>
                        <input type="text"
                            value={this.state.price}
                            onChange={this.handleChange}
                            placeholder="products price is"
                            name="price"  />
                    </div>
                    <div className="file">
                        <input type="file" className="input-file"
                            name="image"  />
                    </div>
                    <div className="underline-input-file">
                    </div>
                    <div className="subject">
                        <label ></label>
                    </div>
                    <div className="message">
                        <label ></label>
                        <textarea
                            name="description"
                            value={this.state.description}
                            onChange={this.handleChange}
                            placeholder="I'd like to chat about"
                            id="message_input" cols="30" rows="5" >
                        </textarea>
                    </div>
                    <div className="submit">
                        <input type="submit" value="Send Message" />
                    </div>

                </form>
        }
            </div> 
            : <Redirect to="/" />
        )
    }
}

谢谢

Answer 1

当你重定向到 "/" 时你会看到, Card 组件将被重新挂载(re-rendered)。这里的问题是 data Prop ，你通过它仍然保持不变。

<Route exact path="/">
    <Cards data={data} />
</Route>

因此，为了使其正常工作，您必须调用 fetchAllProduct()每次安装 Card 组件时。以便在每次渲染时重新获取数据，就像您需要的那样。

我建议将下面的一段代码从 Index.js 移到 Card.js

componentDidMount() {
    //this.fetchAllProduct();
    this.props.fetchAllProduct();
}

另外不要忘记将 fetchAllProduct 传递给 <Card/>

<Route exact path="/">
    <Cards data={data} fetchAllProduct={this.fetchAllProduct} />
</Route>