Javascript React JS道具已更新，但未渲染_Javascript_Reactjs

Javascript React JS道具已更新，但未渲染

javascript reactjs

Javascript React JS道具已更新，但未渲染,javascript,reactjs,Javascript,Reactjs,这个程序的本质是，当你在输入中输入任何值时，你会得到2个随机数和2个随机字符串。由于onChange事件在输入数字期间是值得的，因此必须对其进行更改和呈现。但这些数字并没有出现。但是，使用React开发人员工具，我看到生成了值所有代码： <html> <head> <meta charset="utf-8" /> <title>Page Title</title> </head> <body>

这个程序的本质是，当你在输入中输入任何值时，你会得到2个随机数和2个随机字符串。由于onChange事件在输入数字期间是值得的，因此必须对其进行更改和呈现。但这些数字并没有出现。但是，使用React开发人员工具，我看到生成了值

所有代码：

<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>

如何解决此问题？

如果要更改

此.state的值，请使用setState


切勿直接对该状态进行变异，因为之后调用setState（）
可能会替换您进行的变异。将this.state视为不可变的
对不起，我的英语很差
在下拉列表中
：直接呈现道具
，而不是状态；
在方法eachRender
中，它似乎创建了一个全新的DropDownList
，但唯一的区别是props，您可以在控制台中打印它。
欢迎您的建议：）
我可以看出您的代码有很多地方有问题，但回答这些问题可能超出Stackoverflow的范围，我建议您将其发布到官方文档中，并阅读其中的内容，特别是关于“在反应中思考”的部分这是我尝试做的第一件事，但React会产生以下形式的错误：超出最大更新深度。当组件在组件WillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。
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]},
    ] };