Question

我开始慢慢地从React开始我的冒险，并从几天开始就着手解决这个问题，想学习axios。因此，我正在基于Json服务器包创建电影库。一切正常，只是在添加编辑或删除新电影之类的每个动作之后我无法自动刷新。我知道我必须以某种方式将getMovie函数传递给editMovie，deleteMovie和addMovie的随后部分，但我完全不知道如何做。我将getMovie放入函数中，并在一开始将其传递给componentDidMount来启动它，但我不知道如何将其传递给组件以将其放入编辑/删除/添加函数中。我试图通过导出功能做到这一点，但没有解决。也许我必须通过道具来做到这一点，但它也不想为我工作：(我将不胜感激，感谢您的帮助。

表单组件

class Form extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            type: '',
            description: '',
            id: '',
            movies: [],
            errors: "",
        }
    }


    handleChangeOne = e => {
        this.setState({
            name: e.target.value
        })
    }
    handleChangeTwo = e => {
        this.setState({
            type: e.target.value
        })
    }
    handleChangeThree = e => {
        this.setState({
            description: e.target.value
        })
    }


    handleSubmit = e => {
        e.preventDefault()
        const url = `http://localhost:3000/movies/`;
        if (this.state.name != "" && this.state.type != "" && this.state.description != "") {
            axios
                .post(url, {
                    name: this.state.name,
                    type: this.state.type,
                    description: this.state.description,
                    id: this.state.id
                })
                .then(res => {
                    // console.log(res);
                    // console.log(res.data);
                    this.setState({
                        movies: [this.state.name, this.state.type, this.state.description, this.state.id]
                    })
                })
        }
        else {
            this.setState({
                errors:"Please, Fill all forms above"
            })
        }
    }

    handleRemove = e => {
        // const url = `http://localhost:3000/movies/`;
        const url = `http://localhost:3000/movies/${e.id}`;
        axios
            .delete(url)
            .then(res => {
                console.log(res.data);
            })
            .catch((err) => {
                console.log(err);
            })
    }

    editMovie = e => {
        if (this.state.name != "" && this.state.type != "" && this.state.description != "") {
            const url = `http://localhost:3000/movies/${e.id}`;
            axios
                .put(url, {
                    name: this.state.name,
                    type: this.state.type,
                    description: this.state.description,
                })
                .then(res => {
                    console.log(res.data);
                })
                .catch((err) => {
                    console.log(err);
                })
        }
        else {
            this.setState({
                errors:"Please, Fill all forms to edit movie"
            })
        }
    }



    render() {


        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" placeholder="Movie" onChange={this.handleChangeOne}/>
                    <input type="text" placeholder="Type of movie" onChange={this.handleChangeTwo}/>
                    <textarea placeholder="Description of the movie"
                              onChange={this.handleChangeThree}></textarea>
                    <input id="addMovie" type="submit" value="Add movie" ></input>
                    <p>{this.state.errors}</p>
                </form>
                <List removeClick={this.handleRemove} editClick={this.editMovie}/>
            </div>
        )
    }
}

列表组件

class List extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            movies: [],
        }
    }

    componentDidMount() {
        this.getMovie()

    }
     getMovie = () => {
        const url = `http://localhost:3000/movies`;
        console.log(url);
        axios
            .get(url)
            .then(res => {
                console.log(res.data);
                const movies = res.data;
                this.setState({
                    movies: movies,
                })
            })
            .catch((err) => {
                console.log(err);
            })
        }
    // }




    editMovie = (event, e) => {
        event.preventDefault();
        console.log("it works with edit!");
        if (typeof this.props.editClick === "function") {
            this.props.editClick(e)
        } else {
            console.log("Doesn't work with edit");
        }
    }


    removeMovie = (event, e) => {
        event.preventDefault();
        console.log("it works with remove!");
        if (typeof this.props.removeClick === "function") {
            this.props.removeClick(e)
        } else {
            console.log("Doesn't work with remove");
        }
    }


    render() {

        return (
            <div className="movieList">
                {this.state.movies.map(e =>
                    <ul>
                        <li data-id={e.id} onClick={event => this.editMovie(event, e)}>
                            Title: {e.name}
                        </li>
                        <li data-id={e.id} onClick={event => this.editMovie(event, e)}>
                            Type: {e.type}
                        </li>
                        <li data-id={e.id} onClick={event => this.editMovie(event, e)}>
                            Description: {e.description}
                        </li>
                        <button className="removeMovie" type="submit" onClick={event => this.removeMovie(event, e)}>Delete</button>
                    </ul>)}
            </div>
        )
    }
}

Answer 1

它不刷新，因为在组件完全加载后仅被调用一次。您需要的是一个在更新后执行的触发器。

对于这些，有一些React公开的生命周期方法。

您应该在getMovie()或componentWillReceiveProps()中移动componentDidUpdate()方法。

如果您使用的是最新的React版本，则应该使用getDerivedStateFromProps()。

这三种方法将在您每次更新状态时执行。但是，这些方法在不同的用例（必须决定）中很有用

希望这会有所帮助;）

Axios使用React自动刷新

1 个答案: