反应地图，道具未定义

Question

这是我的 App.js 代码

import React, { useState } from "react";
import { Route } from "react-router-dom";
import Home from "./Home/Home";
import TextsList from "./Text/TextsList";
import WriteButton from "./WriteButton/WriteButton";
import ListButton from "./ListButton/ListButton";
import WriteForm from "./WriteForm/WriteForm";
import "./App.css";

function App() {
  const [texts, setTexts] = useState([
    {
      id: 1,
      author: "Penguin",
      text: "Hello World!!",
    },
    {
      id: 2,
      author: "DonaldDuck",
      text: "Let's Play~~!!",
    },
    {
      id: 3,
      author: "Tom and Jerry",
      text: "Jerry Cheese Cake",
    },
  ]);
  const [nextId, setNextId] = useState(4);
  const [inputAuthor, setInputAuthor] = useState("");
  const [inputText, setInputText] = useState("");

  const onAuthorChange = (e) => {
    e.preventDefault();
    setInputAuthor(e.target.value);
  };

  const onTextChange = (e) => {
    e.preventDefault();
    setInputText(e.target.value);
  };

  const onClick = (e) => {
    e.preventDefault();
    const newTexts = texts.concat({
      id: nextId,
      author: inputAuthor,
      text: inputText,
    });

    setNextId(nextId + 1);
    setTexts(newTexts);
    setInputAuthor("");
    setInputText("");
    

  const textsList = texts.map((t) => <li key={t.id}>{t}</li>);

  return (
    <div className="all">
      <Route path="/" component={Home} />
      <div>
        <Route
          exact
          path="/"
          render={() => <TextsList textsList={textsList} />}
        />
        
      </div>
      <div id="WriteButton">
        <Route exact path="/" component={WriteButton} />
      </div>
      <div id="WriteForm">
        <div id="ListButton">
          <Route path="/writeform" component={ListButton} />
        </div>
        <Route
          path="/writeform"
          render={() => (
            <WriteForm
              inputAuthor={inputAuthor}
              onAuthorChange={onAuthorChange}
              inputText={inputText}
              onTextChange={onTextChange}
              onClick={onClick}
            />
          )}
        />
      </div>
    </div>
  );
}

export default App;

这是我的 TextsList.jsx 代码

import React from "react";
import "./TextsList.css";

const TextList = ({ textsList }) => {
  console.log(textsList[2].props.children.text);
  return (
    <div id="TextListContainer">
      <p>John K - Parachute</p>
      <ol>{textsList.id}</ol>
    </div>
  );
};

export default TextList;

console.log(textsList[2].props.children.text); 结果 => 杰瑞芝士蛋糕

我想制作我的 TextsList.jsx 喜欢

return <div id="TextListContainer">
      <ol>{textsList.id}</ol>
    </div>

如果我写这样的代码

{textsList.id}

错误弹出...

我想让所有的文本都呈现出来。

请帮帮我 （我的英文不好，请见谅）

Answer 1

我还是个菜鸟，但这是我在上一个使用 OOP 的 react 项目中所做的。

如果出现错误，我会一一记录下每个步骤，以查看对象是否仍像我希望的那样跟随。

import React, { useState } from "react";
import "./TextsList.css";

const TextList = ({ textsList }) => {
  const [display, setDisplay] = useState();
  console.log(textsList[2].props.children.text);

// you can customize inside the map what info you want displayed
  setDisplay(
    <>
    {textList.map((text, index) => {
      return (
        <>
          <li key={index}>{text.path.to.prop}</li>
        </>
      );
    })};
    </>
  };


  return (
    <div id="TextListContainer">
      <ol>{display}</ol>
    </div>
  );
};

export default TextList;

我希望这对你有用！

Answer 2

不用担心...如果我们不是本地人，我们都会很挣扎...为您的代码制作一些 tweeks...

首先...用户 props.children 在您的 TextList 容器上...您也可以像以前一样将其用作道具...但是在实际使用容器时使用 props.children 更清洁、更直观.. . 所以...

import React from "react";
import "./TextsList.css";

const TextList = (props) => {
  return (
    <div id="TextListContainer">
      <ol>{props.children}</ol>
    </div>
  );
};

export default TextList;

第二...将您的 TextList 组件添加到 App.js 的渲染中，使用 textList 作为子组件。

import TextList from './TextList';
const [texts, setTexts] = useState([
    {
      id: 1,
      author: "Penguin",
      text: "Hello World!!",
    },
    {
      id: 2,
      author: "DonaldDuck",
      text: "Let's Play~~!!",
    },
    {
      id: 3,
      author: "Tom and Jerry",
      text: "Jerry Cheese Cake",
    },
  ]);

  ...

  const textsList = texts.map((t) => <li key={t.id}>{t}</li>);
  return <TextList>{textList}</TextList>;

Answer 3

问题出在下面一行

 const textsList = texts.map((t) => <li key={t.id}>{t}</li>);

由于您试图将对象作为反应子传递，它会抛出错误，只需传递字符串值或传递另一个组件中的值。

const { useState } = React;

const TextList = ({ textsList }) => {
  return (
   <div id="TextListContainer">
      <p>John K - Parachute</p>
       <ol>
       { textsList }
      </ol>
   </div>
  );
}

const App = () => {
  const [texts, setTexts] = useState([{ id: 1, author: "Penguin", text: "Hello World!!", }, { id: 2, author: "DonaldDuck", text: "Let's Play~~!!", }, { id: 3, author: "Tom and Jerry",  text: "Jerry Cheese Cake",}]);
  const textsList = texts.map((t) => <li key={t.id}>{t.author}</li>);
  
  return <TextList textsList={textsList} />
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>