无法读取地图函数内部React JS中未定义的属性'substr'

Question

[尝试渲染功能组件并尝试使用item.biography.substr(0, 20)截断地图项上的大段落时。

我尝试了不同的语法，但没有成功。将不胜感激。这是我的组件。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from 'axios';
import $ from 'jquery';
//import "./styles.css";

function Instructor() {
  const [page, setPage] = useState(1);
  const [data, setData] = useState(['a', 'b', 'c']);
  const [isLoading, setIsLoading] = useState(true);


  const loadMoreData = () => {
    setPage(page + 1);
  };
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'http://www.localhost/ulearn/api/getInstructors',
      );
      setData(result.data);
    };
    fetchData();
  }, []);
  return (
    <div>
      <h1> API FOR INSTRUCTOR COMPONENT </h1>
      {isLoading && <p>Wait I'm Loading comments for you</p>}

      {data.length !== 0 && (
        <button onClick={loadMoreData}>Load More Data</button>
      )}
      {data.map((item, index) => (

        <div className="col-xl-3 col-lg-4 col-md-6 col-sm-6" key={index}>
          <div className="instructor-box mx-auto text-center">
            <a href="{{ route(d.view, d.instructor_slug) }}">
              <main>
                <div className="col-md-12">
                  <h6 className="instructor-title">{item.first_name} 
                    {item.last_name}
                  `enter code here`</h6>
       <p> {item.biography.substr(0, 20)}  </p> 

                </div>
              </main>
            </a>
          </div>
        </div>
      ))}
    </div>
  );
}

if (document.getElementById('instructor')) {
  ReactDOM.render(<Instructor />, document.getElementById('instructor'));
}

Answer 1

鉴于data的初始状态为['a', 'b', 'c']，因此在等待biography挂钩中来自undefined的响应时，可以确定fetchData()为useEffect()。

在那种情况下，您可能只想进行空/未定义的检查，并仅当使用来自substr()钩子的响应填充item.biography时，才使用useEffect方法有条件地运行该语句。>

{item.biography && item.biography.substr(0, 20)}

Answer 2

Answer 3

Answer 4