javascript - React JS 中的渲染没有返回任何内容

Question

我正在调用 API(假的，仅用于测试)，但在调用它时收到错误这是我的调用代码

class Pacientes extends React.Component {
  state = {
    loading: true,
    error: null,
    data: undefined,
  };  

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    this.setState({ loading: true, error: null });

    try {
      const data = await api.pacientes.list();
      this.setState({ loading: false, data: data });
    } catch (error) {
      this.setState({ loading: false, error: error });

    }
  };

  render() {
    if (this.state.loading === true && !this.state.data)
      return (
        <PageLoading/>
      );

    if (this.state.error) return (
      `Este fue el error ${this.state.error}`
    );

    return (
      <React.Fragment>
        <TableHeader elementos={this.state.data} />
        <Table pacientes={this.state.data} />
      </React.Fragment>
    );
  }
}

控制台显示错误位于以下行:

this.setState({ 加载: false, 数据: 数据 });

但我认为没有。然后，在调用 api 时，我调用一个组件并给出 api(数据)的答案的 props，这就是组件:

function useSearchPacientes(pacientes) {
  const [query, setQuery] = React.useState('');
  const [filteredPacientes, setFilteredPacientes] = React.useState(pacientes);

  React.useMemo(() => {
    const result = pacientes.filter(paciente => {
      return (
        `${paciente.firstName} ${paciente.lastName}`
      )
        .toLowerCase()
        .includes(query.toLowerCase());
    });

    setFilteredPacientes(result);
  }, [pacientes, query]);

  return { query, setQuery, filteredPacientes };
}

function Table(props) {
  const pacientes = props.pacientes;

  const { query, setQuery, filteredPacientes } = useSearchPacientes(pacientes);

  if (filteredPacientes.length === 0) {
    return (
      "No se encontraron resultados"
    );

    return (
      <React.Fragment>
          <div className="search-container">
            <form className="search-input-container">
              <input type="text" className="search-input form-control" placeholder="Buscar"
                value={query}
                onChange={(e) => {
                  setQuery(e.target.value);
                }}
              />
              <FontAwesomeIcon icon={faSearch} className="text-muted search-input-icon"/>
            </form>
            <div className="options">
              <select name="" className="form-control" id="">
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
              </select>
            </div>
          </div>
        <br />
        <div className="row justify-content-center">
          <div className="col-10 table-container border-primary">
            <br />
            <table className="table rounded table-responsive-md">
              <thead>
                <tr>
                  <th scope="col">Id</th>
                  <th scope="col">Nombre</th>
                  <th scope="col">Apellido</th>
                  <th scope="col">Twitter</th>
                  <th scope="col" className="text-center">
                    Opciones
                  </th>
                </tr>
              </thead>
              <tbody>
                {filteredPacientes.map(paciente => {
                  return (
                    <tr key={paciente.id}>
                      <TableRow paciente={paciente} />
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
        <br />
      </React.Fragment>
    );
  }
}

所以，然后搜索这个错误，我找不到真正的解决方案，但我真的认为错误是在第二个组件中，靠近数组的映射函数。

Answer 1

您错误地在 if 条件中使用了右大括号

function Table(props) {
  const pacientes = props.pacientes;

  const { query, setQuery, filteredPacientes } = useSearchPacientes(pacientes);

  if (filteredPacientes.length === 0) {
    return (
      "No se encontraron resultados"
    );
  } // the closing bracket should be here
    return (
      <React.Fragment>
          <div className="search-container">
            <form className="search-input-container">
              <input type="text" className="search-input form-control" placeholder="Buscar"
                value={query}
                onChange={(e) => {
                  setQuery(e.target.value);
                }}
              />
              <FontAwesomeIcon icon={faSearch} className="text-muted search-input-icon"/>
            </form>
            <div className="options">
              <select name="" className="form-control" id="">
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
              </select>
            </div>
          </div>
        <br />
        <div className="row justify-content-center">
          <div className="col-10 table-container border-primary">
            <br />
            <table className="table rounded table-responsive-md">
              <thead>
                <tr>
                  <th scope="col">Id</th>
                  <th scope="col">Nombre</th>
                  <th scope="col">Apellido</th>
                  <th scope="col">Twitter</th>
                  <th scope="col" className="text-center">
                    Opciones
                  </th>
                </tr>
              </thead>
              <tbody>
                {filteredPacientes.map(paciente => {
                  return (
                    <tr key={paciente.id}>
                      <TableRow paciente={paciente} />
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
        <br />
      </React.Fragment>
    );
}