reactjs - 输入默认值已设置但未显示

Question

注意到为输入设置了 defaultValue 的一些奇怪之处，但有时刷新页面时它不可见。 我已经尝试过 console.log，然后组件在加载数据时重新渲染多次，在最后一次重新渲染时，组件包含所需的值，如您在屏幕截图中所见，但未显示。 知道为什么吗？ 谢谢

<input type="text" name={this.props.question.id}
                defaultValue={defaultValue}
                onChange={this.onSingleChange.bind({
                    selectAnswer: this.props.selectAnswer,
                    question: this.props.question,
                    form: this.props.fid
                })}
                className="form-control"
            />

Answer 1

我之前也遇到过同样的问题。 我的解决方案是在输入中添加一个随机数的key道具。

key={`${Math.floor((Math.random() * 1000))}-min`}

根据我的阅读，这与仅在初始呈现器上设置的defaultValue有关。 随机数会导致使用正确的默认值进行重新渲染。

希望能有所帮助。

Answer 2

我同意@Daltron 提供的解决方案，但也可以通过将 key prop 绑定与其值而不是添加随机值来解决。