reactjs

问题 I'm making an Rails API call and return a single JSON object that has a nested User Object and a tag list array. However, I can't access the nested Object. this.props.post.user.name throws: Cannot read property 'name' of undefined. I am confused because when I make the call to PostsIndex in PostsIndex.js and get an array of objects and map through it I can access everything. Is there something I need to do when only dealing with a single object? PostShow.js import React, {Component} from

问题 I'm making an Rails API call and return a single JSON object that has a nested User Object and a tag list array. However, I can't access the nested Object. this.props.post.user.name throws: Cannot read property 'name' of undefined. I am confused because when I make the call to PostsIndex in PostsIndex.js and get an array of objects and map through it I can access everything. Is there something I need to do when only dealing with a single object? PostShow.js import React, {Component} from

问题 splice() mutates the original array and should be avoided. Instead, one good option is to use filter() which creates a new array so does not mutates the state. But I used to remove items from an array using splice() with spread operator. removeItem = index => { const items = [...this.state.items]; items.splice(index, 1); this.setState({ items }); } So in this case when I log items changes but this.state.items stays unchanged. Question is, why does everyone use filter instead of splice with

问题 splice() mutates the original array and should be avoided. Instead, one good option is to use filter() which creates a new array so does not mutates the state. But I used to remove items from an array using splice() with spread operator. removeItem = index => { const items = [...this.state.items]; items.splice(index, 1); this.setState({ items }); } So in this case when I log items changes but this.state.items stays unchanged. Question is, why does everyone use filter instead of splice with

问题 i have method in my parent element, an d i passed it as a prop; like this: <NavBar retrieveList={this.retrieveList}/> and in my child component i can not able to call this method from another method body. handleCloseModal () { window.$('#newHireModal').modal('hide'); /* this is working */ console.log(this.props.retrieveList); /* it gives method body, just to be sure props is coming here */ this.props.retrieveList; /*it gives "Expected an assignment or function call..." */ this.props

问题 I have a parent componenet, Inside this I have included a child component with props. but When any state is changed in parent component (that doesn't related to child component) then child component re-render. I don't want this re render on every state change. Can we stop? import React, { useState } from "react"; import ReactDOM from "react-dom"; import Child from "./child"; import "./styles.css"; function App() { const [any_state, setAnyState] = useState(false); const handleClick = () => {

问题 I'm making a React app and trying to use Auth0 to authenticate. After trying to log in, it returns this: XMLHttpRequest cannot load https://my-domain.auth0.com/usernamepassword/login. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests

问题 I'm making a React app and trying to use Auth0 to authenticate. After trying to log in, it returns this: XMLHttpRequest cannot load https://my-domain.auth0.com/usernamepassword/login. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests

问题 Is there possibility to override publicPath in react-scripts for dev env. I use symfony and I include react app inside twig so I had to change assets to serve from http://localhost:3000/static/js/bundle.js - this works fine but I have problem with static files because they are rendered in browser as '/static/media/logo.813ua.png' and my current url is http://localhost:8000 What I did is I run yarn eject and modify in webpack.config.dev.js: var publicPath = 'http://localhost:3000/' and

问题 Is there possibility to override publicPath in react-scripts for dev env. I use symfony and I include react app inside twig so I had to change assets to serve from http://localhost:3000/static/js/bundle.js - this works fine but I have problem with static files because they are rendered in browser as '/static/media/logo.813ua.png' and my current url is http://localhost:8000 What I did is I run yarn eject and modify in webpack.config.dev.js: var publicPath = 'http://localhost:3000/' and