javascript - unboundStoryFn(...): Nothing was returned from render. This usually means a return statement is missing. Or, to ren

admin管理员组

文章数量:1426118

I am trying to test a react search ponent with storybook, it gives a unboundStoryFn error. The error says unboundStoryFn(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. I can't seem to find the problem.

import React from "react";
import PropTypes from "prop-types";
import "./SearchBox.css";

const STYLES = ["apolity", "skin", "cloud", "dark", "peacock"];

const fetchColor = (color) => {
  var test = getComputedStyle(document.documentElement).getPropertyValue(
    `--${color}`
  );

  return test;
};

const SearchBox = ({ style, type, onClick, color, className }) => {
  style = STYLES.includes(style) ? style : STYLES[0];

  color = STYLES.includes(color) ? fetchColor(color) : "#1e656d";

  return (
    <div>
      <input
        className={`searchbox ${style} ${className}`}
        onClick={onClick}
        type={type}
        placeholder="Search"
      ></input>

      <svg
        width="18"
        height="18"
        viewBox="0 0 18 18"
        fill="none"
        xmlns=""
        className={` search-icon `}
      >
        <circle
          cx="10.5513"
          cy="6.82051"
          r="5.32051"
          transform="rotate(90 10.5513 6.82051)"
          stroke={color}
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M5.71802 10.9102L1.62828 14.9999"
          stroke={color}
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  );
};

SearchBox.propTypes = {
  style: PropTypes.string,
  color: PropTypes.string,
};

SearchBox.defaultProps = {
  style: "apolity",
  color: "apolity",
};

export default SearchBox;

I am trying to test a react search ponent with storybook, it gives a unboundStoryFn error. The error says unboundStoryFn(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. I can't seem to find the problem.

import React from "react";
import PropTypes from "prop-types";
import "./SearchBox.css";

const STYLES = ["apolity", "skin", "cloud", "dark", "peacock"];

const fetchColor = (color) => {
  var test = getComputedStyle(document.documentElement).getPropertyValue(
    `--${color}`
  );

  return test;
};

const SearchBox = ({ style, type, onClick, color, className }) => {
  style = STYLES.includes(style) ? style : STYLES[0];

  color = STYLES.includes(color) ? fetchColor(color) : "#1e656d";

  return (
    <div>
      <input
        className={`searchbox ${style} ${className}`}
        onClick={onClick}
        type={type}
        placeholder="Search"
      ></input>

      <svg
        width="18"
        height="18"
        viewBox="0 0 18 18"
        fill="none"
        xmlns="http://www.w3/2000/svg"
        className={` search-icon `}
      >
        <circle
          cx="10.5513"
          cy="6.82051"
          r="5.32051"
          transform="rotate(90 10.5513 6.82051)"
          stroke={color}
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M5.71802 10.9102L1.62828 14.9999"
          stroke={color}
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  );
};

SearchBox.propTypes = {
  style: PropTypes.string,
  color: PropTypes.string,
};

SearchBox.defaultProps = {
  style: "apolity",
  color: "apolity",
};

export default SearchBox;

import React from 'react';
import SearchBox from './index';

export default {
  title: 'Components/Search',
  ponent: SearchBox,
  argTypes: {
    onClick: { action: 'clicked' },
    style: {
      control: {
        type: 'select',
        options: ['apolity', 'skin', 'cloud', 'dark', 'peacock'],
      },
    },
    color: {
      control: {
        type: 'select',
        options: ['apolity', 'skin', 'cloud', 'dark', 'peacock'],
      },
    },
  },
};

const Template = (args) => {
  <SearchBox {...args} />;
};

export const Type1 = Template.bind({});

Type1.args = {
  color: 'apolity',
  style: 'apolity',
};

File structure

Storybook error page

• javascript
• html
• reactjs
• storybook

Share Improve this question Follow edited Feb 10, 2021 at 3:28 Joundill 7,6651313 gold badges3838 silver badges5353 bronze badges asked Feb 10, 2021 at 0:46 sudip-modisudip-modi 9611 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

const Template = (args) => {
  <SearchBox {...args} />;
};

should be

const Template = (args) => {
  return <SearchBox {...args} />;
};

let me know if that fixes it. Whenever you get that error in react, it means you have forgotten a return statement somewhere. Or something that should be a ponent hasn't been initialized and given a value. But it's usually the first one.

本文标签：