Reactjs Javascript 如何將窗口變量放入反應中

Question

我一直在關注關於如何從 javascript 獲取變量到 reactjs 的另一篇文章。

我在Javascript中有如下對象數組

window.dataArr = [];

function makeJsObj(descr, currDate, done) {
        var data = {};
        console.log(descr + " " + currDate + " " + done);
        data['desc'] = descr;
        data['targetDate'] = currDate;
        data['done'] = done;
        dataArr.push(data);
    }

在反應中，這就是我調用上述數組的方式

<App items={window.dataArr}/>
<TodoList items={items} />

和

function TodoList({ items }) {
  return items.map(item => (
      <h1>{item.desc}</h1>
  ));
}

我收到一個錯誤，我在未定義上使用地圖

可運行代碼段

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App({items}) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

      <TodoList items={items} />
    </div>


  );
}
function TodoList({ items }) {
  return items.map(item => (
      <h1>{item.desc}</h1>
  ));
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App items={window.dataArr}/>, document.getElementById('root'));


serviceWorker.unregister();

Answer 1

你為什么不簡單地使用state ？

state = {
  dataArr: []
}

<App items={this.state.dataArr}/>
<TodoList items={this.state.dataArr} />

推薦閱讀：提升狀態