逻辑检查后如何在 React 中自动刷新

Question

我正在运行一个 Rails 应用程序并使用 React 作为视图。在我的主要组件中，我正在检查 Rails 对象是否为空。如果它是空的，我正在显示一个组件，如果对象不为空，我正在显示另一个。

if (this.props.projects.length > 0){
        var projectList = <Project_list projects={this.state.projects} /> }
    else {
        var projectList = <Noproject />
    }

这很好用，但是一旦我创建了第一个新项目并将其添加到对象中，我必须在第一次刷新页面以加载其他组件。之后，我的 React 逻辑将对象动态添加到显示的列表中，而无需刷新。

这是主要的组件文件：

class Projects extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        projects: this.props.projects,
        project_name: '',
        project_zipcode: '',
        project_timeframe: '',
        project_supplier: '',
        showModal: false
    }
}


openModal = () => {
    this.setState({ 
        showModal: true 
    });
}

closeModal = () => {
    this.setState({
        showModal: false,
        project_name: '',
        project_zipcode: '',
        project_timeframe: '',
        project_supplier: ''
    });
}

handleUserInput(obj) {
    this.setState(obj);
}

handleFormSubmit() {
    const project = {
        name: this.state.project_name, 
        zipcode: this.state.project_zipcode, 
        timeframe: this.state.project_timeframe,        
        supplier: this.state.project_supplier
    };
    $.post('/projects',
        {project: project})
        .done((data) => {
            this.addNewProject(data);
        });
    this.setState({
        showModal: false
    })
}

addNewProject(project){
    const projects = update(this.state.projects, { $push: [project]});
    this.setState({
        projects: projects.sort(function(a,b){
            return new Date(b['updated_at']) - new Date(a['updated_at']);
        })
    });
    this.setState({
        project_name: '',
        project_zipcode: '',
        project_timeframe: '',
        project_supplier: ''
    })
}

render() {

    if (this.props.projects.length > 0){
        var projectList = <Project_list projects={this.state.projects} /> }
    else {
        var projectList = <Noproject />
    }

    return (

        <div>
           <h2>Start a New Project</h2>
                <Button
                    bsStyle="success"
                    bsSize="large"
                    onClick={this.openModal} >
                    Create a New Project
                </Button>

                <Modal show={this.state.showModal} onHide={this.closeModal}>
                  <Modal.Header closeButton>
                    <Modal.Title>Create a New Project</Modal.Title>
                  </Modal.Header>
                  <Modal.Body>

                    <Project_form 
                    project_name={this.state.project_name} 
                    project_zipcode={this.state.project_zipcode} 
                    project_timeframe={this.state.project_timeframe}
                    project_supplier={this.state.project_supplier}
                    onUserInput={(obj) => this.handleUserInput(obj)}
                    onFormSubmit={() => this.handleFormSubmit()} />

                  </Modal.Body>
                  <Modal.Footer>
                    <Button onClick={this.closeModal}>Cancel</Button>
                  </Modal.Footer>
                </Modal>



                <div className="col-md-12">                     
                    <div className="table-responsive">
                      {projectList}
                    </div>                              
                </div>                  
        </div>

        )
}
}

const destination = document.querySelector(".projects")

document.addEventListener('DOMContentLoaded', () => {
 const node = document.getElementById('projects_data')
 const data = JSON.parse(node.getAttribute('data'))
 ReactDOM.render(
<Projects projects={data} />,
destination)

})

您将如何执行此逻辑检查以使您无需刷新页面，或者是否有其他方法可以在不刷新页面的情况下自动加载其他组件？

Answer 1

我认为您的问题需要更多细节。update 方法是什么？是对服务器的调用吗？它返回什么？另外，第二个setState 是做什么用的？为什么不一次调用所有setState？

项目是来自于道具的状态吗？如果它保持在状态，您可以将this.props.projects 更改为this.state.projects，然后您的组件将在状态更改后更新。

您可以使用 componentWillMount 中的 Rails 数据或类似的东西初始化 this.state.projects。

如果您分享更多代码，我将能够更好地帮助您