反应地图，道具未定义

问题描述

这是我的 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}

错误弹出...

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

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

解决方法

我还是个菜鸟，但这是我在上一个使用 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;

希望这对你有用！

,

不用担心...当我们不是本地人时，我们都会为英语而苦恼...我不确定这是否正是您要找的...但据我了解，做您想做的事，您只需要对您的代码进行一些调整...

首先...您的 TextList 容器上的用户 props.children...您也可以像以前一样将其用作道具...但在实际使用时使用 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>;

,

问题出在下面一行

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

由于您尝试将 object 作为 react child 传递，它会抛出错误，只需传递字符串值或在另一个组件中传递值即可。

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,{ id: 2,{ id: 3,}]);
  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>