javascript - 尝试在其他类中重新使用组件并收到错误 : "Warning: setState(...): Can only update a mounted or mounting > component. "

Question

我正在整理一个小 POC，其中一部分用于执行搜索功能。这个想法是“搜索”将负责以下事情:
- 显示搜索输入表单(例如，文本、日期和位置参数)
- 命中后端 AWS Lambda 搜索 API
- 将结果对象返回给搜索对象
- 能够在多个页面上重复使用

我有两个不同的页面，我想利用“搜索”功能，但以不同的方式呈现结果。

搜索组件/表单可以独立运行，但我不知道如何将它嵌入其他网页。每当我尝试在“搜索表单”中输入任何内容时，控制台都会抛出以下错误:

index.js:2178 Warning: setState(...): Can only update a mounted or mounting > component. This usually means you called setState() on an unmounted component. > This is a no-op.

Please check the code for the Search component.

下面是“搜索”代码，以及显示结果的页面开头。我是前端开发的新手，所以我可能在这里做了一些愚蠢的事情……寻找关于我做错了什么的意见!感谢您的帮助。

import React, { Component } from "react";
import {FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import LoaderButton from "../components/LoaderButton";
import "./Home.css";
import DatePicker from 'react-datepicker';
import moment from 'moment';
import PlacesAutocomplete from 'react-places-autocomplete';
import { searchAssets } from "../libs/awsLib";

import 'react-datepicker/dist/react-datepicker.css';

// CSS Modules, react-datepicker-cssmodules.css
import 'react-datepicker/dist/react-datepicker-cssmodules.css';


export default class Search extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            freeText: "",
            startDate: null,
            endDate: null,
            radius: 5,
            address: '',
            searchResults: null
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleStartDateChange = this.handleStartDateChange.bind(this);
        this.handleEndDateChange = this.handleEndDateChange.bind(this);
        this.handleLocationChange = this.handleLocationChange.bind(this);
    }

    // Basic change handling
    handleChange = event => {
        this.setState({ [event.target.id]: event.target.value });
    }

    // Location change needed because event.id cannot be taken from places object
    handleLocationChange = address => {
        console.log("The address has been changed: " + address);
        this.setState({ address: address });
    }

    // I need two separate handlers for each piece of the date range
    handleStartDateChange = date => {
        this.setState({ startDate: date });
    }

    handleEndDateChange = date => {
        this.setState({ endDate: date });
    }

    // 
    handleSubmit = async event => {
        event.preventDefault();
        console.log(event);

        // Construct the query string for AWS search

        var queryStatement = {
            accountId: 'account1', // Dummy
            groupId: 'group1', // Dummy
            caseId: '999', // Dummy
            freeText: this.state.freeText,
            radius: this.state.radius
        };

        if (this.state.startDate != null) {
            queryStatement['startDate'] = this.state.startDate.format("MM/DD/YYYY");
        }

        if (this.state.endDate != null) {
            queryStatement['endDate'] = this.state.endDate.format("MM/DD/YYYY");
        }

        if (this.state.address !== '') {
            queryStatement['address'] = this.state.address
        }

        console.log(queryStatement);

        this.setState({ isLoading: true });

        // Submit to the search API and load the Payload as a JSON object
        try {

            var resultSet;
            resultSet = await searchAssets(queryStatement);
            if (resultSet['StatusCode'] !== 200) {
                console.log("Error in lambda function");
            }
            console.log(JSON.parse(resultSet['Payload']));

            this.setState({
                isLoading: false,
                searchResults: JSON.parse(resultSet['Payload'])
            });

        }
        catch (e) {
            console.log(e);
            this.setState({ isLoading: false });
        }
    }

    render() {

        const autoLocationProps = {
          value: this.state.address,
          onChange: this.handleLocationChange,
        }

        console.log(this.state);

        // Only fetch suggestions when the input text is longer than 3 characters.
        const shouldFetchSuggestions = ({ value }) => value.length > 3


        return (
            <div className="Search">
                <form onSubmit={this.handleSubmit}>
                    <FormGroup controlId="freeText" bsSize="large">
                        <ControlLabel>Enter text to search on</ControlLabel>
                        <FormControl
                            type="textarea"
                            onChange={this.handleChange}
                            value={this.state.freeText}
                            placeholder="Enter any values to search on"
                        />
                    </FormGroup>
                    <FormGroup controlId="address" bsSize="large">
                        <ControlLabel>Enter search location</ControlLabel>
                        <PlacesAutocomplete 
                            inputProps={autoLocationProps}
                            shouldFetchSuggestions={shouldFetchSuggestions}
                            placeholderText="Start typing an address"
                        />
                    </FormGroup>
                    <FormGroup controlId="radius" bsSize="large">
                        <ControlLabel>Enter search radius</ControlLabel>
                        <FormControl
                            onChange={this.handleChange}
                            type="text"
                            value={this.state.radius}
                        />
                    </FormGroup>
                    <FormGroup controlId="startDate" bsSize="large">
                        <ControlLabel>Enter start date</ControlLabel>
                        <DatePicker
                            onChange={this.handleStartDateChange}
                            selected={this.state.startDate}
                            placeholderText="Enter start date"
                            isClearable={true}
                            maxDate={this.state.endDate}
                        />
                    </FormGroup>
                        <FormGroup controlId="endDate" bsSize="large">
                        <ControlLabel>Enter end date</ControlLabel>
                        <DatePicker
                            onChange={this.handleEndDateChange}
                            selected={this.state.endDate}
                            placeholderText="Enter end date"
                            isClearable={true}
                            minDate={this.state.startDate}
                        />
                    </FormGroup>
                    <LoaderButton
                        block
                        bsSize="large"
                        type="submit"
                        isLoading={this.state.isLoading}
                        text="Search for files"
                        loadingText="Searching..."
                    />
                </form>
            </div>
        );
    }
}

以表格形式查看:

import React, { Component } from "react";
import {Table, thead, tbody, th, tr, td } from "react-bootstrap";
import Search from "./Search";
import "./Home.css";

export default class Viewfiles extends Component {
    constructor(props) {
        super(props);
    }  

    render() {   

        // Eventually we will render the results in the table...
        var resultsObject = new Search();

        return (
            <div className="Viewfiles">
                {resultsObject.render()}
                <hr/>
                <Table striped condensed responsive >
                    <thead>
                        <tr>
                        <th>Thumbnail</th>
                        <th>Checksum</th>
                        <th>Address</th>
                        <th>Checksum</th>
                        <th>Description</th>
                        </tr>
                    </thead>
                </Table>
            </div>
        );
    }
}

Answer 1

React 组件旨在在 JSX 中呈现，例如 <Search /> .如果您自己实例化它们，React 将不知道如何使用状态和所有内容正确安装它们。