如何從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>
        );
    }
}