JvectorMap перерисовывает правильные маркеры после setState reactjs
Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда данные, передаваемые в jvectormap, меняются, карта не отражает эти изменения.
Внутри моего штата у меня есть два набора данных: data1 и data2. Внутри моего метода рендеринга у меня есть кнопка, при нажатии на которую this.state.data1 будет иметь то же содержимое, что и this.state.data2, поскольку карта принимает this.state.data1 в качестве значения для markers. Вот моя функция рендеринга:
render() {
return (
<div>
<a
href = "#"
onClick = {() =>
this.setState({ data1: this.state.data2 }, () =>
console.info(this.state.data1)
)
}
>
Click
</a>
<div style = {{ width: 500, height: 300 }}>
<VectorMap
map = {"world_mill"}
backgroundColor = "#FFFFF"
markerStyle = {{
initial: {
fill: "#FFFF",
stroke: "#383f47"
}
}}
series = {{
markers: [
{
attribute: "r",
scale: [5, 20],
values: [60, 6, 54],
normalizeFunction: "polynomial"
}
]
}}
regionStyle = {{
initial: {
fill: "#128da7"
},
hover: {
fill: "#A0D1DC"
}
}}
markers = {this.state.data1}
ref = "map"
containerStyle = {{
width: "100%",
height: "100%"
}}
containerClassName = "map"
/>
</div>
</div>
);
}
}
Весь код прост и находится здесь: https://codesandbox.io/s/2vx2k1vl9n.
Как вы можете видеть, в методе onClick для кнопки я печатаю data1 после установки состояния, чтобы убедиться, что его значение изменяется, как и происходит, но не отражается на карте. Кто-нибудь может мне с этим помочь?
Заранее спасибо!
Ответы 1
Проблема в основном не в вашем коде. Я просто зашел в репозиторий React-jvectormap и взглянул на код, потому что подозреваю, что есть что-то, запрещающее повторный рендеринг.
Оказывается, карта не отображается с помощью ReactJS, вместо этого она отображается с помощью jQuery.
Я пошел, разветвил проект и изменил его код, чтобы он работал с приведенным выше примером.
Я сделаю пул-реквест в их репо, а вы можете попробовать использовать мою версию здесь: https://github.com/seifsg/react-jvectormap
И это файл, в который я внес изменения, вы можете просто скопировать и вставить его в нужное место в папке node_modules: https://github.com/seifsg/react-jvectormap/blob/master/src/lib/components/VectorMap.js
Итак, чтобы он работал с вашим кодом:
Скопируйте измененный файл в соответствующий каталог node_modules
В том же каталоге запустите
npm i, затемnpm run build, который должен сгенерировать новый файл сборки и заставить ваши изменения работать.
Вот пример, использующий только файл сборки: codeandbox.io/s/kw90mx7647
Да, именно этого не хватало.
Привет, @Seif Sgayer, я попробовал то, что вы предложили. Я скопировал, вставил ваш VectorMap.js в node_modules, сбросил сервер и попробовал. Он по-прежнему ведет себя так же
Я также удалил все из VectorMap.js и повторно запустил свою программу, и она работала точно так же ... Я редактирую node_modules / response-jvectormap / src / lib / components / VectorMap.j s ... может это возможно это не тот файл?
@jim похоже, что их версия npm немного отличается от версии github. Они используют другой основной файл и используют веб-пакет. Итак, пока: * Скопируйте измененный файл в соответствующий каталог node_modules * В том же каталоге выполните npm i, затем npm run build, который должен сгенерировать новый файл сборки и заставить ваши изменения работать. Вот пример, использующий только файл сборки: codeandbox.io/s/kw90mx7647
спасибо вам большое, вы эксперт! Можете ли вы включить приведенный выше комментарий в ответ, чтобы я мог отметить его как правильный и наградить вас бонусными баллами
@jim Я сделал это. Спасибо!
Привет, @Seif Sgayer, я загрузил вашу песочницу кода и попытался запустить ее на своей машине и получил несколько ошибок, таких как 'define' is not defined и Expected an assignment or function call and instead saw an expression. Знаете ли вы, почему он работает в песочнице, а не локально на моей машине?
Вероятно, из-за изменения окружающей среды. Я не знаю точно причины, однако мой запрос на перенос был принят и объединен. Теперь вам не нужно копировать и вставлять код вручную. Вам просто нужно обновить свой React-jvectormap, и даже ваш исходный код и ящик теперь должны работать.
все, что я сделал, это нажал кнопку загрузки в codeandbox и запустил программу на моем компьютере после того, как я ее загрузил .... По запросу на перенос вы говорите о своей версии github? И что вы имеете в виду, обновив response-jvectormap, когда вы заменили его компонентом react-jvectormap-new-build? Разве я не смогу оставить его по-прежнему? ... Извините за эти вопросы, я новичок
Привет, @Seif Sgayer, спасибо за ответ, я попробую это сделать, как только вернусь домой. Единственное изменение, которое вы внесли, - это добавление метода componentDidUpdate ()?