javascript - 通过 Prop 传递功能后 react 和检查条件

Question

很长一段时间以来，我一直在与我的应用程序作斗争，并且进展缓慢，但是我仍然有一个问题 我想将函数思想 Prop 从表单组件传递到列表组件，之后我想检查是否单击了按钮添加，如果是，那么我想在列表组件内启动函数 getMovie() 并向 json 数据库发送另一个请求。通过编辑和删除，它可以像在同一个组件中一样工作，通过添加按钮，它有点棘手。

问题是如果我只写

else if (this.props.addClick) {
                this.getMovie();
        }

不断向数据库发送请求

下面是我的代码

表单组件

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

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 => {
                    this.setState({
                        movies: [this.state.name, this.state.type, this.state.description, this.state.id]
                    })
                })
                .then(this.setState({
                isButtonRemoveClicked: true
            }))
        }
        else {
            this.setState({
                errors:"Please, Fill all forms above"
            })
        }

    }

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} addClick={this.handleSubmit}/>
            </div>
        )

列表组件

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

    componentDidMount() {
        this.getMovie()
    }

    componentDidUpdate() {
        if (this.state.isButtonRemoveClicked === true) {
            this.getMovie();
            this.timer = setTimeout(() => {
                this.setState({
                    isButtonRemoveClicked: false
                })
            }, 10)
        }
        else if (this.props.addClick === true) {
                this.getMovie();
        }
    }

    componentWillUnmount() {
        clearTimeout(this.timer)
    }


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

Answer 1

没有什么神奇的；) 您开始从 componentDidUpdate() 加载数据...数据加载，componentDidUpdate 再次触发，再次...

不要这样处理事件。