Не уверены в происхождении ошибки перекрестного происхождения - PullRequest
Новая
       3

Не уверены в происхождении ошибки перекрестного происхождения

0 голосов
/ 11 июля 2020

По какой-то причине добавление строки {jokes.map(joke => joke.setup)} (см. Полный компонент ниже) вызывает ошибку (также показано ниже). Я чувствую, что это связано с хуком useState, но я не уверен, что нужно делать. Любая помощь будет принята с благодарностью!

Код компонента следующий: 

import React, {useState, useEffect} from 'react'

function JokeFinder() {

    //2 states: input query, jokes shown
    const [query, setQuery] = useState('')
    const [jokes, setJokes] = useState([])
    
    const getJokes = async (event) => {
        
        event.preventDefault();
        let URL;
        
        try{
            if(query === "one" || query === "1") {
                URL = `https://official-joke-api.appspot.com/jokes/random`
            } else if (query === "ten" || query === "10") {
                URL = 'https://official-joke-api.appspot.com/jokes/ten'
            }
            const result = await fetch(URL);
            const data = await result.json();
            setJokes(data);
        } catch(err) {
            console.log(err);
        }
    }
    
    const changeHandler = (event) => {
        setQuery(event.target.value)
    }
    
    return(
        <div>
            <form className="form" onSubmit={getJokes}>
                <label className="label" htmlFor="query">It's never a bad time to have a laugh! How many jokes would you like to enjoy? One or ten? Type in the number below.</label>
                <input 
                    className="input"
                    type="text"
                    name="query"
                    placeholder="Enter number of Jokes Desired"
                    value={query}
                    onChange={changeHandler}
                />
                <button className="button" type="submit">Search!</button>
            </form>
            <div className="card-list">
                {jokes.map(joke => joke.setup)}
            </div>
        </div>
    )
}

export default JokeFinder

Возникла следующая ошибка: 

!Error: Unknown error
!The above error occurred in the <JokeFinder> component: in JokeFinder (created by Main) in div (created by Main) in Main Consider adding an error boundary to your tree to customize error handling behavior.
>Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

1 Ответ

2 голосов
/ 11 июля 2020

Вы неправильно используете функцию карты. Вы должны передать функцию map. 

const { useState } = React;

const JokeFinder = () => {
  const [query, setQuery] = useState("");
  const [jokes, setJokes] = useState([]);

  const getJokes = event => {
    event.preventDefault();
    let URL;

    try {
      if (query === "one" || query === "1") {
        URL = `https://official-joke-api.appspot.com/jokes/random`;
      } else if (query === "ten" || query === "10") {
        URL = "https://official-joke-api.appspot.com/jokes/ten";
      }
      fetch(URL).then((result) => {
         result.json().then(data => setJokes(data));
      });
    } catch (err) {
      console.log(err);
    }
  };

  const changeHandler = event => {
    setQuery(event.target.value);
  };

  return (
    <div>
      <form className="form" onSubmit={getJokes}>
        <label className="label" htmlFor="query">
          It's never a bad time to have a laugh! How many jokes would you like
          to enjoy? One or ten? Type in the number below.
        </label>
        <div className="input-container">
           <input
             className="input"
             type="text"
             name="query"
             placeholder="Enter number of Jokes Desired (only one or ten)"
             value={query}
             onChange={changeHandler}
           />
           <button className="button" type="submit">
             Search!
           </button>
        </div>
      </form>
      <div className="card-list">
        {jokes.length ? (
          jokes.map((joke, index) => (
            <div key={index}>
              <p className="setup" >{joke.setup}</p>
              <p className="punchline">{joke.punchline}</p>
            </div>
          ))
        ) : (
          <div>
            <p className="setup">{jokes.setup}</p>
            <p className="punchline">{jokes.punchline}</p>
          </div>
        )}
      </div>
    </div>
  );
};


class App extends React.Component {
  render() {
    return (
      <JokeFinder />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
.input-container {
  margin-top: 10px;
}
.input-container input {
  margin-right: 10px;
  min-width: 240px;
}
.setup {
  font-weight: 700;
}
.punchline {
  padding-left: 10px;
}
<html>

<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

</body>

</html>

Рабочий пример можно найти здесь

...