Question

我是javascript的新手，我想运行一些代码，具体取决于state.value！= null或“”.it不会抛出错误但会冻结。请在下面查看我的代码。非常感谢您的帮助。

constructor(){
    super();
    this.state = {
        value:null,
        list:[]
    }
}

handleList = () => {
    //let list = this.state.list.slice();
    if (this.state.value != null || this.state.value.length() > 0 ) {
        let list = [...this.state.list];
        list.push(<li>{this.state.value}</li>);

        this.setState({list});
        console.log(list.length,this.state.list.length);
    }else{
        console.log("Cant enter null");
    }
}


render() {

    return(
        <div className = 'global'>

           <button onClick={() => {this.handleList()}
            }>Add-New</button>
            <input 
                onChange = {
                    (e)=>{this.setState({value: e.target.value})}
                }
                type = 'text' 
                placeholder = 'Enter New Todo!'/>
            <hr/>
            <ul>
                {
                    this.state.list.map((li) => {
                        return (li);
                    })
                }
            </ul>

        </div>
    );
}

}

Answer 1

评估字符串是否存在

在JavaScript中：空Strings ''为falsey（评估为false）。

const x = ''
if (x) console.log('x = true')
else console.log('x = false')

因此，this.state.value的存在得到简洁验证如下：

if (this.state.value) .. // Do something if this.state.value != ''

只需引用variables后跟&&（这导致最后一个truthy变量为returned），就可以利用和链接此策略。如果未找到truthy变量，则false为returned。即。如果是以下onClick标记的<button/>方法。

呈现列表

在React中：通常会存储plain variables（Strings，Objects等）的列表，并处理转换为element表单飞。

呈现代表Strings的{{1}}是一个安全漏洞。在制作中：有人可以非常轻松地键入恶意HTML elements并破坏整个应用程序。如果您希望继续沿着这条路走下去，可能需要使用dangerouslySetInnerHTML。

See the docs for more info on how to render lists.

<强> 实施例

请参阅下文，了解todo容器的粗略示例。

todo

// Container.
class Container extends React.Component {

  // Constructor.
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      list: []
    }
  }

  // Render.
  render = () => (
    <div className = 'global'>
     <button onClick={() => this.state.value && this.setState({value: null, list: [...this.state.list, this.state.value]})}>Add</button>
      <input value={this.state.value} onChange={(e) => this.setState({value: event.target.value})}  placeholder="Todo.."/>
      <hr/>
      <ul>
        {(this.state.list.length > 0 && (this.state.list.map((todo, index) => <li key={index}>{todo}</li>))) || '..'}
      </ul>
    </div>
  )

}

// Mount.
ReactDOM.render(<Container/>, document.querySelector('#root'))

Answer 2

因为您正在使用OR，所以检查两个条件。因此，即使value为NULL，代码仍会尝试检查字符串的长度。但是NULL对象没有＆＃34;长度＆＃34;属性，所以这将导致＆＃34;值没有属性：length＆＃34;错误。要解决此问题，使用AND（＆amp;＆amp;）会更合适。

此外，＆＃34;长度＆＃34;属性是一个值，而不是一个函数，因此尝试调用函数将导致＆＃34;长度是值的函数＆＃34;错误。

查看网页时，这些错误应显示在控制台中。如果按F12，浏览器底部会出现一个窗口。如果您随后选择控制台选项卡，则应该能够看到所有错误输出。您可能需要确保您没有过滤错误消息。

如果或条件不起作用

2 个答案: