useSWR Hook 返回 undefined

Posted 2023-02-18

【中文标题】useSWR Hook 返回 undefined

【英文标题】：useSWR Hook returns undefined

【发布时间】：2022-01-22 17:37:14

【问题描述】：

我在 pages 文件夹中有一个 create-example.js 文件，所以结构是 pages/examples/create-example。

我正在使用我的 create-example.js 文件中的 useSWR 挂钩获取两个 url 端点，然后将数据传递给我的 via props 像这样

<ExampleComponent intent_data = intent_data/> entity_data = entity_data/>

问题是当我在 create-example.js 文件中控制台 intent_data 和 entity_data 时，我在控制台中获取了该数据，但是当我在我的<ExampleComponent/> 中解构它们，然后我得到intent_data 的数据，但entity_data 我得到未定义的数据

我的 create-example.js 代码

import ExampleComponent from "../../components/ExampleComponent/CreateExampleComponent"
import MainComponentLayout from "../../components/Layout/MainLayoutComponent"
import useSWR from "swr"
import axios from "axios"
const intent_fetcher = (url) => axios.get(url).then(response => response.data)
const entity_fetcher = (url) => axios.get(url).then(response => response.data)
const CreateExamplePage = () => 
    const data:intent_data,error:intentError = useSWR(`https://jsonplaceholder.typicode.com/todos`,intent_fetcher)
    const data:entity_data,error:entityError = useSWR(`https://jsonplaceholder.typicode.com/users`,entity_fetcher)
    // console.log(intent_data)
    console.log(entity_data)
    return(
        <MainComponentLayout ComponentToRender = <ExampleComponent intent_data = intent_data/> entity_data = entity_data/>
    )

export default CreateExamplePage

示例组件代码

const ExampleComponent = (props) => 
  const intent_data,entity_data = props 
  const test = entity_data?.map?.((value) => value.title)
  console.log(test)
  console.log(entity_data)
  const [form] = Form.useForm();
  const onFinish = (values: any) => 
    console.log(values);
    form.resetFields()
  ;
  return (
    <Card className="csi-project-card-0934">
      <Form
        form=form
        labelCol= span: 7 
        wrapperCol= span: 10 
        layout="horizontal"
        colon=true
        onFinish=onFinish
        size="large"
      >
        <Form.Item
          label="Select Intent"
          name="intent_name"
          className="csi-ant-form-item"
          rules=[ required: true, message: "Intent Cannot be Empty!" ]
        >
          <Select>      
             intent_data?.map?.((value) => <Select.Option key = value.id value=value.title>value.title</Select.Option>)
          </Select>
        </Form.Item>
        
        

        <Form.Item
          label="Select Entity"
          name="selected_entity"
          className="csi-ant-form-item"
          rules=[ required: true, message: "Cannot be Empty!" ]
        >
          <Select>
            /* entity_data?.map?.((value) => <Select.Option key = value.id value=value.title>value.title</Select.Option>) */
          </Select>
        </Form.Item>
        

        <Form.Item className="csi-ant-form-item">
          <Space style= marginLeft: "35vw" >
            <Button key="submit" type="primary" htmlType="submit" shape="round">
              Add Entity <PlusOutlined />
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
;

总结 我的问题：- ExampleComponent 中的 console.log(entity_data) 给出未定义，而 intent_data 给出正确的数据。

预期结果：- entity_data 和 intent_data 都应该提供适当的对象数组作为数据

我提到使用 useSWR 挂钩获取多个端点的链接是 Calling multiple endpoints using NextJS and the SWR library

【参考方案1】：

这对我来说是一个非常愚蠢的错误，我没有正确地将道具传递给我的<ExampleComponent/>

那么只有要更改的行来自这个

<MainComponentLayout ComponentToRender = <ExampleComponent intent_data = intent_data/> entity_data = entity_data/>

到这里

<MainComponentLayout ComponentToRender = <ExampleComponent intent_data = intent_data entity_data = entity_data/>/>

【参考方案2】：

也许先尝试检查数据是否存在。你不会得到undefined

if(intent_data)
   console.log(intent_data)

然后使用 if 或条件语句将 intent_data 传递给您的组件。

【讨论】：

我得到了intent_data，它是entity_data的问题，它给出了未定义的

是的，但最初在发出/验证对 api 的请求时，intent_data 仍未定义，并且该值正在您的组件中使用。

我正在使用可选链接处理