Выбор элемента в массиве по индексу при использовании перехватчиков React - PullRequest
Новая
       0

Выбор элемента в массиве по индексу при использовании перехватчиков React

1 голос
/ 16 марта 2020

TL / DR: Возникли проблемы с ссылками на элементы в массиве по индексу (с помощью React), возможно, потребуется некоторое руководство.

Я пытаюсь создать компонент в моем SPA из данных, поступающих из API. Используя React hook useState и useEffect, я создал состояние, сделал вызов ax ios, а затем установил в response.data.articles состояние (.articles - это массив объектов, которые я использую для создания содержимого dynamici c) , 

 function App() {

  const [storyArray, setStoryArray] = useState();

  useEffect(() => {
    axios.get('http://newsapi.org/v2/everything?domains=wsj.com&apiKey=[redacted_key_value]')
      .then((response) => { 
        // console.log(response);
        setStoryArray(response.data.articles);
      })
      .catch((err) => {
        console.log(err);
      })
  }, [])

  console.log(storyArray)

  return (
    <div className="App">
      <Directory />
      <HeaderStory />
    </div>
  );
}

Отсюда мое состояние - это массив объектов. Моя цель - передать объект FIRST в качестве реквизита компоненту <HeaderStory />, но каждый раз, когда я пытаюсь сослаться на этот элемент массива с точечной нотацией, меня встречает неопределенная ошибка. Моя попытка обойти эту проблему состояла в том, чтобы установить элемент в переменную, а затем передать переменную как подпорку компоненту. 

const firstStory = storyArray[0];

Это также привело к неопределенной ошибке. Нужен совет / помощь по ссылкам на элементы в массиве, которые будут переданы и использованы в React.

Ответы [ 2 ]

2 голосов
/ 16 марта 2020

Вы должны установить значение по умолчанию для storyArray.

Пример кода: 

function App() {

  const [storyArray, setStoryArray] = useState([]); //Init storyArray value

  useEffect(() => {
    axios.get('http://newsapi.org/v2/everything?domains=wsj.com&apiKey=[redacted_key_value]')
      .then((response) => { 
        // console.log(response);
        setStoryArray(response.data.articles);
      })
      .catch((err) => {
        console.log(err);
      })
  }, [])

  console.log(storyArray)

  return (
    <div className="App">
      <Directory />
      <HeaderStory firstStory={storyArray[0] || {}} />
    </div>
  );
}

Я установил реквизиты firstStory = {storyArray [0] || {}} потому что если storyArray [0] не определено, тогда пропустите пустой объект "{}" для свойства firstStory.

2 голосов
/ 16 марта 2020

На первом рендере storyArray не будет иметь значения / undefined, хук useEffect будет выполняться только после component mount.

Таким образом, вы должны визуализировать компонент условно, если значение storyArray имеет значение, то только HeaderStory.

Пример: 

function App() {
    const [storyArray, setStoryArray] = useState();
    useEffect(() => {
        axios.get('http://newsapi.org/v2/everything?domains=wsj.com&apiKey=[redacted_key_value]')
            .then((response) => {
                // console.log(response);
                setStoryArray(response.data.articles);
            })
            .catch((err) => {
                console.log(err);
            })
    }, [])

    return (
        <div className="App" >
            <Directory />
            {storyArray && <HeaderStory firstStory={storyArray[0]} />}
        </div>
    );

}
...