`Gatsby Build` неправильно выводит перемешанные объекты массива - PullRequest
Новая
       28

`Gatsby Build` неправильно выводит перемешанные объекты массива

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

У меня есть показ слайдов, созданный с использованием компонентов карусели ReactStraps. Каждый слайд обрабатывается с помощью массива. json, который содержит имя автора, название, их цитату и выстрел в голову. Функция JS затем перетасовывает порядок массива, чтобы гарантировать, что слайды загружаются в случайном порядке для каждой загрузки страницы.

Проблема заключается в том, что после того, как этот проект был собран, и его размещен на живом сервер, изображения-свидетельства применяются к неправильным слайдам - ​​но только при ссылке в элементах html <img>.

Кроме того, я не могу повторить эту проблему с помощью gatsby develop клеммный вход. Вместо этого создается впечатление, что эта ошибка возникает только после gatsby build или при размещении на работающем сервере.

Файл. json имеет следующую структуру: 

[
    {
        "name": "First Name",
        "title": "First Job Title",
        "quote": "First quote.",
        "image": "/home/quotes/first_image.jpg"
    },
    {
        "name": "Second Name",
        "title": "Second Job Title",
        "quote": "Second quote.",
        "image": "/home/quotes/second_image.jpg"
    }
]

Компонент отзывов: 

class Testimonials extends React.Component {
    render() {
        const json = this.props.testimonial;

        return (
            <Carousel controls={true}>
                {json.map(edge => (
                    <Carousel.Item>
                        <div>
                            <p className="testimonialText">{edge.node.quote}</p>

                            <p className="testimonialAuthor">{edge.node.name}</p>
                            <p className="testimonialAuthorTitle">{edge.node.title}</p>

                            // This outputs the correct image url
                            {edge.node.image}

                            // This outputs the image url from a different object in the array
                            <img src={edge.node.image} alt="" />    
                        </div>
                    </Carousel.Item>
                ))}
            </Carousel>
        );
    }
}

И функция shuffle: 

const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;

    function shuffle(array) {
        array.sort(() => Math.random() - 0.5);
    }

    shuffle(json);

    <div>
        <Testimonials testimonial={json} />
    </div>
}

Я понял, что удаление функции shuffle предотвратит обработку изображений не по порядку, поскольку объект будет загружаться только в порядке что они выводятся из массива.

Кроме того, я попытался обновить функцию shuffle для решения этой проблемы. В частности, я использовал функцию массива shuffle, на которую ссылается этот поток . Однако обновление этой функции перемешивания не решило проблему.

1 Ответ

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

Вы пытаетесь изменить неизменяемый объект (данные должны оставаться неизменными в Гэтсби), и я бы сначала проверил это.

Вы можете создать и отсортировать новый массив, например: 

const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;

    function shuffle(array) {
        return [...array].sort(() => Math.random() - 0.5);
    }

    const sortedArray = shuffle(json);

    <div>
        <Testimonials testimonial={sortedArray} />
    </div>
}

Вы должны знать, что по определению Гэтсби в стати c HTML сгенерирует один случайный результат. Вы можете установить порядок по умолчанию в useState и перемешать его в useEffect: 

const Home = (props) => {
    const json = props.data.allTestimonialsJson.edges;
    const [testimonial, setTestimonial] = useState( json )

    useEffect(() => {
      function shuffle(array) {
        return [...array].sort(() => Math.random() - 0.5);
      }
      setTestimonial( shuffle(testimonial) )
    }, [])

    <div>
        <Testimonials testimonial={testimonial} />
    </div>
}

Это одно из возможных решений. Он будет визуализировать этот компонент дважды (первый раз для stati c HTML и второй раз. когда JS будет готово), альтернативой является использование useState( null ) и скрытие для него <Testimonials>, он будет отображать ползунок один раз, но он не будет доступен в части c HTML.

Также с запущенными npm run build и gatsby serve следует запустить версию сборки на локальном хосте: 9000.

...