Question

我想从外部函数将值设置为PeopleItem文件中的componentDidMount并获取返回值。这可能吗？执行程序时出现错误。我新开始了React。你能给我个主意吗？谢谢你。

SELECT * FROM points WHERE points.geom && ST_MakeEnvelope(0.13712199999997665, 51.8121, 0.26340800000002673, 51.9135, 4326)

Answer 1

您需要研究react中的setState。对状态做出反应。就你而言。应该是这样的：

import React from 'react';
import axios from 'axios';

    class PeopleItem extends React.Component{
        state ={
            data:[]
        }
        async componentDidMount() {
            const response = await axios.get(val);
            this.setState({data:response}) //now you can consume it this data in using states
        }

        _renderObject(){
            const {data} = this.props;
            return Object.entries(data.films).map(([key, value], i) => {
                return (
                    <div key={key}>
                        {this.state.data}
                    </div>
                )
            })
        }

        render(){
            const {data} = this.props;
            return (
                    <div>
                        Star Name: {data.name} <br/>
                        Films: 
                        {this._renderObject()}
                    </div>
            );
        }
    }

    export default PeopleItem;

请进一步说明您的问题。我只是给您概述了。

根据我的理解，应该像这样将值传递给子组件，在子组件中它获取数据并将其呈现为component：

class FetchData extends React.Component {
       async componentDidMount(){
           const response = await axios.get(this.props.val);
           this.setState({ data: response }) 
       }
       render(){
           return(
               <div>
                   Star Name: {data.name} <br />
                   Films:
                        {this.state.data}
               </div>
           )
       }
   }
    class PeopleItem extends React.Component{
        state ={
            data:[]
        }
        async componentDidMount(val) {
             //now you can consume it this data in using states
        }

        _renderObject(){
            const {data} = this.props;
            return Object.entries(data.films).map(([key, value], i) => {
                return (
                    <div key={key}>
                        <FetchData val={val}/>
                    </div>
                )
            })
        }
        fetchData(val){
            const response = await axios.get(val);
            this.setState({ data: response })
        }

        render(){
            return (
                    <div>         
                        {this._renderObject()}
                    </div>
            );
        }
    }

    export default PeopleItem;

Answer 2

注意：这不是您要回答的问题的明确答案了解Reactjs的基本概念。

Reactjs生命周期挂钩是一个操纵状态的“功能”，并且这种方式仅触发dom的更改。

在生命周期挂钩中创建的所有变量和函数的寿命很短，并且只要生命周期挂钩完成执行就可以完成。

在这种情况下，您必须在状态对象内设置所有要访问的属性，并通过函数和生命周期挂钩对其进行更改。

无论代码是否异步，只要它在Lifecycle挂钩中，它就会执行，更改状态并使用新更改重新呈现组件。

下面有一个例子：

class sto extends Component {
    state = {
        time: 0
    }

    componentDidMount(){
        //you have no access here from outside
        // when the component mounts it gets the actual date and replaces time property with the actual date
        let date = new Date();
        //async function
        setTimeout(() => {
          this.setState({ date: date });
        }, 5000);
    }

    resetDate = () => {
        // when click event is fired
        // you reset the time property inside state and the change reflects in your component
        this.setState({ time: 0 });
    }

    render() {
        return (
            <div>
                {/* show date */}
                { this.state.date }
                <button onClick = { this.resetDate }>Change Date</button>
            </div>
        );
    }
}

如何从React中的另一个函数为componentDidMount设置值？

2 个答案: