React JS props updated, but not rendered
React JS props updated, but not rendered
The essence of this program is that when you enter any value into an input, you get 2 random numbers and 2 random strings. Since the onChange event is worthwhile during the input of the number, it must be changed and rendered. But the numbers do not appear. However, using React Developer Tools, I see that the values are generated.
All code:
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class TextInput extends React.Component
constructor(props)
super(props);
this.state = dropDownList: null;
this.eachRender = this.eachRender.bind(this);
eachRender()
this.eachNumbers = [Math.random(0,10), Math.random(0,10)]; //Numbers are generated randomly
this.eachString = ["One random string", "Another random string"]; //Strings are also generated randomly, in order to simplify the code, they were given static values
var text = document.getElementById("text").value;
if (text !== "")
this.setState(dropDownList: <DropDownList numbers = this.eachNumbers someString = this.eachString/>);
else this.setState(dropDownList: null);
render()
return ( <div>
<input type="text" id="text" onChange=this.eachRender>
</input>
this.state.dropDownList
</div> )
class DropDownList extends React.Component
constructor(props)
super(props);
this.eachTask = this.eachTask.bind(this);
this.state = items: [ //The data should be presented as follows
id: 1, item: this.props.numbers[0], href: this.props.someString[0],
id: 2, item: this.props.numbers[1], href: this.props.someString[1],
] ;
eachTask(items)
return(
<li key = items.id>
Rund Number: <b>items.item.toFixed(3)</b> <br></br>
Rund String <b>items.href</b>
</li>
)
render()
return(
<ul>
this.state.items.map(this.eachTask)
</ul>
)
ReactDOM.render(
<TextInput />, document.getElementById("app")
)
</script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</body>
</html>
I think the problem revolves around this line of code:
this.state = items: [
id: 1, item: this.props.numbers[0], href: this.props.someString[0],
id: 2, item: this.props.numbers[1], href: this.props.someString[1],
] ;
How can this be fixed?
2 Answers
2
Use setState if you want to change the value of this.state.
setState
this.state
Per React docs:
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
this.state
setState()
This is the first thing I tried to do, but React produces an error of the form:
Maximum update depth exceeded. This can happen when a component is repeatedly calls setState inside a componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.– Антон Зеленков
Aug 21 at 4:12
Maximum update depth exceeded. This can happen when a component is repeatedly calls setState inside a componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Sorry for my poor english;
In DropDownList: render props directly instead of state;
It does seems to create a brand new DropDownList in method eachRender, but the only difference is props, you can print it in console.
welcome suggestion:)
DropDownList
props
state
DropDownList
eachRender
props
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
There are many things I can see wrong with your code, but answering them may be out of scope for Stackoverflow, I can recommend posting it on codereview.stackexchange.com and also reading through the official documentation, specifically the part on 'Thinking in react'
– dubes
Aug 20 at 11:15