javascript - In React, how to add a URL "string" as an object's property, from a Link or other compone

admin管理员组

文章数量:1325235

In React, I'm setting an object's URL property (specifically, amcharts chart bullet.url), which is a string, to "../members/{member.name}" It renders with no issues. Clicking the link navigates to the page correctly. However, it seems all the previously loaded states need to be reloaded. Is it a new React "session?"

I've tried setting the property using various expressions using Link. But none seem to pile as expected. Most articles I've found relate to basic usage of Link or persisting state.

The following works rendering and navigating, but all state is gone on new page:

let series = chart.series.push(new am4charts.LineSeries());
let bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.url = "../Members/{member.name}";

I'm thinking there's a React concept I'm missing or an easy way to set a link's URL. I'd like to navigate without "resetting" all the previously loaded states.

In React, I'm setting an object's URL property (specifically, amcharts chart bullet.url), which is a string, to "../members/{member.name}" It renders with no issues. Clicking the link navigates to the page correctly. However, it seems all the previously loaded states need to be reloaded. Is it a new React "session?"

I've tried setting the property using various expressions using Link. But none seem to pile as expected. Most articles I've found relate to basic usage of Link or persisting state.

The following works rendering and navigating, but all state is gone on new page:

let series = chart.series.push(new am4charts.LineSeries());
let bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.url = "../Members/{member.name}";

I'm thinking there's a React concept I'm missing or an easy way to set a link's URL. I'd like to navigate without "resetting" all the previously loaded states.

• javascript
• reactjs
• amcharts
• amcharts4

Share Improve this question Follow edited Apr 12, 2019 at 19:34 Samuel Philipp 11.1k1212 gold badges3939 silver badges5858 bronze badges asked Mar 30, 2019 at 2:41 tallmantallman 12911 gold badge33 silver badges1010 bronze badges 2

• The state of a ponent is always a Javascript object, and is stored in the main memory. Each ponents state is mutating until the page refreshes or closes. After that, the page will be initialized with its initial state. – ABC Commented Mar 30, 2019 at 2:53
• Based on your error message, you are passing an object value that is a function. You should have posted that error message with your initial post. The value for a url needs to be a string. Convert it if it has integers, Object.toString();. You need to access a object value correctly, not a object function. – ABC Commented Mar 30, 2019 at 4:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Instead of using urls, use a click ("hit") event to stay within the React ecosystem. If you allow the chart ponent to be rendered via React Router and export it with withRouter, you can take advantage of this.props.history on the ponent itself. As for how to handle the member's name, presuming the bullet is actually the template for other bullets, I personally believe the member's name should be part of the chart's data. E.g.

Main ponent:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter as Router } from "react-router-dom";

// ...

// main ponent's render
  <Router>
    <React.Fragment>
      <Route
        path="/"
        render={props => <App {...props} />}
      />
      <Route
        path="/Member/:name"
        render={props => <Person {...props} extra="via router" />}
      />
    </React.Fragment>
  </Router>

Component that has your chart (e.g. App):

import React from "react";
import { withRouter } from "react-router-dom";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

// App's ponentDidMount() ...

// ...chart code...

// Member names found in bullet data
chart.data = [ { name: "...", /* ... */ }, /* ... */ ];

// Since we're not using `url`, manually change the cursor to a pointer on hover
bullet.cursorOverStyle = am4core.MouseCursorStyle.pointer;

// Bullet click event
bullet.events.on("hit", event => {
    this.props.history.push('../Members/' + event.target.dataItem.dataContext.name);
});

// ... end App

export default withRouter(App);

Here's a fork of our Column charts with images at top demo in React that when clicking the bullet/images, both updates the main ponent's state as well as goes to a new URL, and both load the person's info:

https://codesandbox.io/s/olpzok2rxz

If the member.name is not part of the chart data and cannot be, it would help to have a sample of your app whether on JSFiddle or CodeSandbox so we can help further.

bullet.url = `'../Members/${member.name}'`;

add this way in object from to url

In response to my ment.

The state of a ponent is always a Javascript object, and is stored in the main memory. Each ponents state is mutating until the page refreshes or closes. After that, the page will be initialized with its initial state.

You could use localStorage or cookies for functionality or a mixin.

Example

const Example = React.createClass({
    getInitialState: function () {
        return JSON.parse(localStorage.getItem('counter') || '{}');
    },
    ponentDidMount: function () {
        let self = this;
        setInterval(function () {
            this.setState({
                ticks: this.state.ticks + 1 // Increment
            });
            localStorage.setItem('counter', JSON.stringify(this.state)); // Store
        }, 1000); // Interval
    },
    render: function () {
        return (
            <span>{this.state.ticks}</span>
    );
    }
});

Link Variable

// "../Members/{member.name}";
// Make sure member.name is not an object, but a string
<a href={ `#/..Members/${members.name}` }>{members.name}</a>

Why do you have an error?

Type.js:171 Uncaught Error: Expected a string or number but got [object Function]

This is because you are accessing an object value that is a function. You need a string. If it is not a string convert it Object.toString();.

// You are not accessing the object correctly
const param = {
  id: function() {
     // This is what it's seeing
  },
  // Needs to be
  id: '../members/id'
}

console.log(param.id);

本文标签：