反应 map，道具未定义

Question

Here is my App.js code

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;

Here is my TextsList.jsx code

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); result => Jerry Cheese Cake

I want to make my TextsList.jsx like

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

if I write the code like

{textsList.id}

error pops up...

I want to make all the texts render.

plz help me (My English is not good, so please forgive me)

Answer 1

I am still a rookie, but this is what I did on my last react project using OOP.

If there is an error, I logged every step, one by one to see if the object was still following like I wanted it to.

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;

I hope this works for you!

Answer 2

No worries... we all struggle if English when we are not natives... I'm not sure if this is exactly what you are looking for... but to my understanding to do what you want you just need to make some tweeks to your code...

First... user props.children on your TextList container... you could also use it as a props as you have done... but using props.children is cleaner and more intuitive when actually using the container... so...

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

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

export default TextList;

Second... add your TextList component to the render of your App.js using textList as its child.

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

The problem lies with the below line

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

Since you are trying to pass object as react child, it will throw error, just pass the string value or pass the values in another component.

 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>