Ошибка типа: невозможно прочитать свойство 'map' из неопределенного - обработка json line: test. js: 11 - PullRequest
Новая
       86

Ошибка типа: невозможно прочитать свойство 'map' из неопределенного - обработка json line: test. js: 11

0 голосов
/ 21 марта 2020

Я хочу использовать файл json в тестовом компоненте, как показано ниже, однако я получаю сообщение об ошибке: TypeError: Невозможно прочитать свойство 'map' из неопределенного Я манипулирую файлом в тесте . js компонента, и я попробовал его с образцом const в той же форме, что и файл в компоненте, и это сработало. Так что я должен неправильно обращаться с формой. Файл имеет вид: 

[{"frame_number": 1, "roi0": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity0": 80.0, "roi1": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity1": 157.0},
{"frame_number": 2, "roi0": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity0": 80.0, "roi1": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity1": 158.0},
{"frame_number": 3, "roi0": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity0": 80.0, "roi1": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity1": 157.0},

Приложение. js


import "bootstrap/dist/css/bootstrap.css";
import React from "react";
import ReactPlayer from 'react-player'


import Buttons_Footer from "./components/Buttons_Footer.js";
import LeftPane from "./components/LeftPane.js";
import Video from "./components/Video.js";
import Radio_Button from "./components/Radio_Button.js";
import Test from "./components/test.js";
//import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { apiResponse: [] };

  }
  // Comunicate with API
  callAPI() {
    fetch("http://localhost:9000/IntensityAPI") //React app talks to API at this url
      .then(res => res.json())
      .then(res => this.setState({ apiResponse: res }));
  }
  componentWillMount() {
    this.callAPI();
  }


  render() {
    return (
      <div className="App">
        <header className="App-header">

          <div class="row fixed-bottom no-gutters">
            <div class="col-3 fixed-top fixed-bottom">
              <LeftPane></LeftPane>
            </div>
            <div class="offset-md-3">
              <Buttons_Footer></Buttons_Footer>
            </div>

           <Test test = {this.state.apiResponse}/>

          </div>
        </header>
        <Video></Video>
      </div>
    );
  }
}
export default App;

Тест. js 

import React from "react";

const Test = (props)=> {

  const keys = props.test.map(frame => Object.keys(frame));
  const filteredKeys = keys.map(frame =>
    frame.filter(key => new RegExp(/^roi\d+$/).test(key))
  );

  const showButtons = frameNumber => {
    return filteredKeys[frameNumber].map((roi, index) => (
      <div>
        <label for={`roi${frameNumber}`}>{`roi${index}`}</label>
        <input type="radio" id={`roi${frameNumber}`} />
      </div>
    ));
  };
  return (
    <div className="Test">
      <div>
        {" "}
        frame0
        {showButtons(0)}
      </div>
      <div>
        {" "}
        frame1
        {showButtons(1)}
      </div>
    </div>
  );
};
export default Test;

1 Ответ

0 голосов
/ 21 марта 2020

Проблема в том, что компонент Test монтируется, когда вызов API еще не завершен. поэтому реквизиты test пустые [], затем keys и filteredKeys тоже пустые, и возникает ошибка.

Позвольте добавить строку, которая проверяет длину FilterKeys 

if (filteredKeys.length === 0) return null;

после 

  const showButtons = frameNumber => {

Чтобы избежать этой ошибки, а также ошибки, когда результат API пуст.

...