如何在不渲染子組件的情況下在 React 組件之間傳遞數據

Question

我試圖從我的 textService 獲取數據到 Error500Page 而不呈現 Error500Page。 如何在不渲染子組件的情況下將狀態數據作為道具傳遞？

我正在嘗試這樣做，但似乎效果不佳。

這是我在父類中的代碼

 constructor(props){
    super(props);
    this.state = {
      url:"",
      data: [],
      isLoaded: false,
      test: "Will it work?",
    }
  }

  componentDidMount() {
    this.fetchImg(process.env.REACT_APP_TEXT_API);
    this.passError500();
  }


  fetchImg(url){
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    fetch(proxyurl+url)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded:true,
          data:json,
          test: "Will it work?",
        })
      })

  }
  passError500(){
    return(
      <Error500Page test={this.state.test}/>
      )

  }

這就是我嘗試訪問子類中的道具的方式

import TextService from 'src/app/services/textService/textService';

const Error500Page = (props) =>
{

  console.log(props.test);
    return (
        <div className="flex flex-col flex-1 items-center justify-center p-16">

            <div className="max-w-512 text-center">

                <FuseAnimate animation="transition.expandIn" delay={100}>
                    <Typography variant="h1" color="inherit" className="font-medium mb-16">
                      {props.test}
                    </Typography>
                </FuseAnimate>

當我控制台 log props.test 我得到未定義。 知道我怎樣才能做到這一點嗎？ 謝謝

Answer 1

嘗試使用this.props訪問道具

const Error500Page = (this.props) =>

Answer 2

也許你會得到你想要的：

 export function Error500Page(test) { return <div className="flex flex-col flex-1 items-center justify-center p-16"> <div className="max-w-512 text-center"> <FuseAnimate animation="transition.expandIn" delay={100}> <Typography variant="h1" color="inherit" className="font-medium mb-16"> {test} </Typography> </FuseAnimate>; } export default { Error500Page };

 passError500(){
    return(
     Error500Page(this.state.test)
      )

  }