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

Question

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

import React from "react";
import axios from "axios";

class PeopleItem extends React.Component {
  async componentDidMount(val) {
    const response = await axios.get(val);
    return response.data;
  }

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

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

export default PeopleItem;

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的更改。

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

对于您的情况，您必须在State Object中设置要访问的所有那些属性，并通过函数和生命周期挂钩对其进行更改。

无论代码是否异步，只要它在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>
        );
    }
}