useSWR Hook 返回 undefined

Question

我在 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

Answer 1

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

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

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

到这里

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

Answer 2

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

if(intent_data){
   console.log(intent_data)
}

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