时间戳

首页 > 解决方案 > React + Styled Components：每次渲染 setState 都会重置所有组件

reactjs - React + Styled Components：每次渲染 setState 都会重置所有组件

问题描述

我偶然发现了一个使用 React + Styled Components 的惊人之谜。我完全不知所措。

这是我的组件：

import React from 'react';
import styled from "styled-components";

class SearchBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            searchStr: '',
            isEditing: false,
            isSearching: false,
            isIdle: true,
            activeMode: 'search'
        };
    }

    onChange=(e)=>{
        console.log("on change input");
        this.setState( {
            ...this.state
        }, () => {
            // nada...
        });
    };


    render () {

        const SearchBarStyle = styled.div`
            height: 85%;
            `;

        return (
            <SearchBarStyle>
                <input type="text" onChange={this.onChange} placeholder="Search"/>
            </SearchBarStyle>
        );
    }
}


export default SearchBar;

问题是这样的：只要我开始输入input,setState就会被调用。当这种情况发生时，一切<SearchBarStyle>都会重置！我的第一个输入字符被删除，输入控件从头开始，显示占位符提示......

令人费解的东西来了：

如果我<SearchBarStyle>用简单的div OR替换，我永远不会调用setState问题不会发生。我可以自由打字……不知何故，调用setState一个使用 styled-components 构建的组件会完全重置它！

威士忌探戈狐步舞！？

标签： reactjs

解决方案

检查此代码

问题 #1。未设置输入值。输入元素应该是

<input
          value={this.state.searchStr}
          type="text"
          onChange={this.onChange}
          placeholder="Search"
        />

问题 #2。目标输入值未在状态中设置，您的 onChange 处理程序应该是

onChange = e => {
    this.setState({ searchStr: e.target.value });
  };

https://codesandbox.io/s/heuristic-montalcini-mkiyq

推荐阅读