isomorphic-javascript

来源： https://stackoverflow.com/questions/29935827/making-restful-api-call-from-react-js

问题 I'm getting the following error using SSR Warning: Expected server HTML to contain a matching <div> in <div>. The issue is on the client when checking the browser width on component mount, and then setting the state of a component to render a mobile version of it instead. But the server is defaulting the desktop version of the container as it is not aware of the browser width. How do I deal with such a case? Can I somehow detect the browser width on the server and render the mobile container

问题 I'm getting the following error using SSR Warning: Expected server HTML to contain a matching <div> in <div>. The issue is on the client when checking the browser width on component mount, and then setting the state of a component to render a mobile version of it instead. But the server is defaulting the desktop version of the container as it is not aware of the browser width. How do I deal with such a case? Can I somehow detect the browser width on the server and render the mobile container

问题 I was using localStorage in my webApp to store data on client side. But when I've tried to make the app isomorphic, this causes an issue. Due to node is not browser environment, it can't define such objects as 'window', 'localStorage' etc. How do I solve this issue? 回答1: You could use a check whether the code is being executed on the server or on the client side by checking whether module is not 'undefined' : var isNode = typeof module !== 'undefined' You can then proceed to only executed

问题 I was using localStorage in my webApp to store data on client side. But when I've tried to make the app isomorphic, this causes an issue. Due to node is not browser environment, it can't define such objects as 'window', 'localStorage' etc. How do I solve this issue? 回答1: You could use a check whether the code is being executed on the server or on the client side by checking whether module is not 'undefined' : var isNode = typeof module !== 'undefined' You can then proceed to only executed

问题 I have been trying to test an else block for when window is undefined. As I'm using Next.js the window will be undefined during server side rendering (SSR). At present I can not find a way to do this. Any help is much appreciated. I have tried setting window = undefined and global.window = undefined in the test and within the definition before function (both all and each options). Both approaches have not been successful. When Googling the closest answer I can find is mocking or spying on a

问题 I am doing a request to my server to patch some regular form fields as well as upload an image. If I do these alone in separate requests all works perfectly, but nothing works if the form data and the file are in the same request. This is what it currently looks like: const file = new FormData() file.append('uploadedFile', uploadedFile, uploadedFile.name) const patch = { name: 'Some Name', age: 18, file } return isomorphicFetch(`${MY_URL}`, { headers: { Accept: 'application/json' } method:

问题 I have a pretty simple React.js component which I need to make an isomorphic (rendered on the server). The problem is that component rendered with helpful information only after ajax request completes, like that: export default React.createClass({ getInitialState() { return {} }, componentDidMount() { fetch("/users/").then(response => { this.setState(users: response.data) }) }, render() { if (this.state.users == undefined) { return <div /> } return <div>{this.state.users.map(some_function)}<

问题 I'm trying to create an isomorphic react app using express, react, and webpack. Everything works fine until I import a css file in one of my components. I understand node can not handle this import, but can someone explain how this package on github allows their components to have a css import line? https://github.com/kriasoft/react-starter-kit I would like to make my project similar to that. Do they have a line anywhere that has the server ignore that line when rendering components? This is

问题 I'm trying to create an isomorphic react app using express, react, and webpack. Everything works fine until I import a css file in one of my components. I understand node can not handle this import, but can someone explain how this package on github allows their components to have a css import line? https://github.com/kriasoft/react-starter-kit I would like to make my project similar to that. Do they have a line anywhere that has the server ignore that line when rendering components? This is