0

我想要做的是将处于主组件状态的列表作为道具传递给 List 组件。

它不工作，我得到“状态”未定义错误。不知道为什么。这是我的代码。

import React from 'react';
import List from './components/List';

import './App.css';

function App() {

  state = {
   list: [
     {
       id: 1,
       place: 'Doesn't matter',
       reserved: false
     },

   ]
 } 
 return (
   <div className="App">
    <List  list={this.state.list} />
   </div>
 );
}

export default App;

列表组件 List.js

import React from 'react';



function App() {
 return (
   <div className="App">
    <h1>app</h1>
   </div>
 );
}

export default App;
4

3 回答 3

1

在功能组件中，您需要使用 useState() 函数而不是 state 属性

function App() {

const [list, setList] = useState([
     {
       id: 1,
       place: 'Doesn't matter',
       reserved: false
     },

   ]);

 return (
   <div className="App">
    <List list={list} />
   </div>
 );
}

有关https://reactjs.org/docs/hooks-intro.html的更多信息

于 2019-11-15T13:56:19.693 回答
0

您也可以采用这种方法，我的意思是您可以将 App 函数转换为可以使用状态的组件类

应用程序.js

import React, { Component } from "react";
import List from "./list";

class App extends Component {
  state = {
    list: [
      {
        id: 1,
        place: "Doesn't matter",
        reserved: false
      },
      {
        id: 2,
        place: "Matter",
        reserved: true
      }
    ]
  };

  render() {
    return (
      <div className={"App"}>
        <List list={this.state.list}></List>
      </div>
    );
  }
}

export default App;

然后将您的列表作为您只想玩道具的功能组件

列表组件

import React from "react";
const List = ({ list }) => {
  return (
    <div>
      <ul>
        {list.map(l => (
          <li key={l.id}>{l.place}</li>
        ))}
      </ul>
    </div>
  );
};

export default List;

希望对你有帮助

于 2019-11-15T14:15:15.603 回答
0

这是使用钩子和状态代码的示例工作示例

于 2019-11-15T14:17:04.287 回答