传入React子组件时数组变量未定义答案

【问题标题】：array variable undefined when passing into React child component传入React子组件时数组变量未定义
【发布时间】：2021-08-19 19:48:19
【问题描述】：

我正在尝试从组件 PresetFetcher 的内部 api 检索道具，并将它们传递给子组件 PromptForm。我的控制台日志显示数据从 API 中正确提取并保存到具有正确数据的对象 {preset} 中。但是无论我做什么，当我尝试将 {preset} 传递给子组件时，它都会报告 null 值并且无法编译。这里有什么问题？这一定是我的一些非常基本的误解。

为了简单起见，我避免使用状态或效果，因为一旦 PromptForm 接收到数据就不需要刷新数据。

    import axios from 'axios'
    import { useParams } from 'react-router-dom'
    import React, { useEffect,useState } from 'react'
    import PromptForm from './PromptForm';
    
    const API_SEARCH_BASE = 'http://0.0.0.0:5001/api2/preset_loader';
    
    function PresetFetcher(props)  {
    
        const { preset_name } = useParams();
        const API_SEARCH_URL = API_SEARCH_BASE + '/' + preset_name;
        console.log('API_SEARCH_URL: ' + API_SEARCH_URL);
        console.log('props entering PresetFetcher page', props);
        const test = [{ name: 'item 1' }, { name: 'item2' }];
    
    
        axios.get(API_SEARCH_URL)
        .then
        (response => {
            console.log('PresetFetcher: response: ', response.data);
            const preset  = response.data;
            console.log('preset after const', preset);
            var preset_description = preset[0].preset_description;
            console.log('preset_description: ', preset_description);
        })
        return (
          <div>   <PromptForm preset_out = {preset_description} /></div>
     
        )
            {console.log('props leaving Presetfetcher: ', props)};
    
    
        }
    
    export default PresetFetcher;


[HMR] Waiting for update signal from WDS...
index.js:8 Array(1)
launcher.js:11 on LauncherPage, preset name is baby-name-generator
launcher.js:12 props on launcherpage are Object
PresetFetcher.js:13 API_SEARCH_URL: http://0.0.0.0:5001/api2/preset_loader/baby-name-generator
PresetFetcher.js:14 props entering PresetFetcher page Object
PresetFetcher.js:13 API_SEARCH_URL: http://0.0.0.0:5001/api2/preset_loader/baby-name-generator
PresetFetcher.js:14 props entering PresetFetcher page Object
PresetFetcher.js:21 PresetFetcher: response:  Array(1)
PresetFetcher.js:23 preset after const Array(1)
PresetFetcher.js:25 preset_description:  Simple baby name generator powered by OpenAI's GPT-3 model gives you creative alternatives from a fresh perspective.
PresetFetcher.js:21 PresetFetcher: response:  Array(1)
PresetFetcher.js:23 preset after const Array(1)0: {id: "2", preset_name: "Baby Name Generator (by Attributes)", preset_author: "WebBabyShower.com", preset_active: "True", preset_launched: "20210610", …}length: 1[[Prototype]]: Array(0)
PresetFetcher.js:25 preset_description:  Simple baby name generator powered by OpenAI's GPT-3 model gives you creative alternatives from a fresh perspective.



ReferenceError: preset_description is not defined
PresetFetcher
src/components/PresetFetcher.js:28
  25 |        console.log('preset_description: ', preset_description);
  26 |    })
  27 |    return (
> 28 |      <div>   <PromptForm preset_out = {preset_description} /></div>
     | ^  29 | 
  30 |    )
  31 |        {console.log('props leaving Presetfetcher: ', props)};

API 数据如下所示。列表中只有一项。

[
  {
    "id": "2",
    "preset_name": "Baby Name Generator (by Attributes)",
    "preset_author": "WebBabyShower.com",
    "preset_active": "True",
    "preset_launched": "20210610",
    "preset_description": "Simple baby name generator powered by OpenAI's GPT-3 model gives you creative alternatives from a fresh perspective.",
    "preset_instructions":

【问题讨论】：

标签： arrays reactjs react-props

【解决方案1】：

该变量在您调用它的范围内不可用。尝试将其移出then 块。我建议将其存储在本地状态中，以便在获取完成时更新组件。

    const [presetDescription, setPresetDescription] = useState('')

    axios.get(API_SEARCH_URL)
    .then
    (response => {
        const preset  = response.data;
        setPresetDescription(preset[0].preset_description);
    })

    <PromptForm preset_out={presetDescription} />

【讨论】：

【解决方案2】：

您可以使用上述答案中提到的“useState”钩子，也可以使用“useRef”钩子，因为它可用于保存类似于类上的实例属性的值。你可以阅读更多关于它的信息here。

要在这种情况下使用它，您可以执行以下操作：-

const presetDescription = useRef('');

axios.get(API_SEARCH_URL)
    .then
    (response => {
        const preset  = response.data;
        presetDescription.current = preset[0].preset_description;
    })

<PromptForm preset_out={presetDescription.current} />

【讨论】：