标签: setstate

我是ReactJS的新手,我遇到错误"this.setState不是函数".

constructor() {
    super();

    this.state = {
        visible: false,
        navLinesShow: true
    };

    this.navOpen = this.navOpen.bind(this)

}

navOpen() {
    this.setState({
        navStatus: "navShow",
        navLinesShow: false
    });

    if ( this.state.visible === false) {

        setTimeout(function (){

            this.setState({
                visible: true
             });

        }, 3000);

    }

我已将this.navOpen = this.navOpen.bind(this)添加到构造函数中.所以我猜问题是setTimeout函数.

什么是可能的解决方案？

谢谢.

我正在尝试从 if 语句中设置状态，但它不会这样做。结果我需要从 if 语句中更新状态，在那里我可以接收经度和纬度坐标，但它不会保存状态。如果我在 if 语句之外的控制台中回显，我将只读取第一个 setState 值表单 componentWillMount。那里有什么问题？我在这里做错了什么？所以这里是结构：

componentWillMount() {
    this.setState({
        location: {
            name: 'Riga'
        }
    });
}

componentDidMount() {
    if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {

            this.setState({
                location: {
                    name: 'Sigulda'
                }
            });
        });
    } else {
        alert('ERROR on GEOLOCATION');
    }

    console.log(this.state.location);
}

我试图单击一个排序图标，该图标将触发更改列表的顺序。

为了使其更简单，假设您有一个按钮和另一个按钮，并且它们位于彼此不同的 div 上。

<div>
    //Button 1
    <button onclick={"some_click_handler"}>
</div>

<div>
    //Button 2
    <button>
        {this.state.someToggle ? true : false}
    </button>
</div>

我正在尝试使用 React 和 Firebase 制作一个待办事项列表应用程序。

这是一个单页应用程序（登录除外）。在我的页面组件中，我调用列表组件。在我的列表组件中，我获取了放入状态的 firebase 数据。在 React Dev Tool 的 List 组件中，我可以看到如下状态：

list{items{...},listName:"exemple"}

因此，在我的返回中，我尝试显示 listName 的值，如下所示：{this.state.list.listName} 但出现以下错误：：无法读取'listName'null 的属性

这是我的列表的组件：

  class ListPage extends Component {
      constructor(props) {
    super(props);

    this.state = {
      list: null,
    };
      }
      componentDidMount() {
    this.listRef = db.ref(`users/${this.props.user.uid}/lists
    ${this.props.cle}`);
    this.listRef.on('value', data=>{
        this.setState({
            list: data.val()
        })
    })
    }
     render() {
    return (
      <div>
        <h1>List : {this.state.list.listName}</h1>
      </div>
    );
  }
}

我哪里错了？

谢谢

我正在尝试实现一个全局搜索过滤器，用于在整个表中搜索键。我正在附加一个更改处理程序，并在每个输入上触发一个回调，该回调在该数据中搜索该键并正在设置该值。它在我输入字符时被过滤，但我希望当我输入多个时搜索工作在搜索输入中搜索像 string1,string2 这样的值

代码沙盒：https : //codesandbox.io/s/jolly-bhabha-iqcx1

代码

import React from "react";
import ReactDOM from "react-dom";
import { Input } from "semantic-ui-react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { firstName: "aaaaa", status: "Pending", visits: 155 },
        { firstName: "aabFaa", status: "Pending", visits: 155 },
        { firstName: "adaAAaaa", status: "Approved", visits: 1785 },
        { firstName: "aAaaaa", status: "Approved", visits: 175 },
        { firstName: "adaSaaa", …

以下是下面的代码，现在我想在同一个组件中更改 name 的值？我如何实现这一目标？

render(){
return(
<div>
<p>{this.props.name}</p>
</div>
)
}

是否可以根据状态变化设置三元组内变量的值？

就像是：

{ this.state.change ? myObj.changeIt = true : null }

像这样写会返回错误： Assignment to property of function parameter 'myObj'

我有一个带有坐标的初始状态对象x = 0 and y = 0，我想在渲染 ref 所附加的 html 元素时更新该对象。

然而，Typescript 告诉我，我尝试在 useEffect 中访问的属性不存在，并出现以下错误

Property 'offsetWidth' does not exist on type 'never'.ts(2339)

。

Property 'offsetHeight' does not exist on type 'never'.ts(2339)

如何在 setState 方法中定义要设置的内容？

  const HierarchyScene = () => {
  const [initialTreePosition, setInitialTreePosition] = useState({
    x: 0,
    y: 0
  })
  const hierarchyContainerRef = useRef(null)

  useEffect(() => {
    if (hierarchyContainerRef) {
      setInitialTreePosition({
        x: hierarchyContainerRef?.current?.offsetWidth || 0,
        y: hierarchyContainerRef?.current?.offsetHeight || 0
      })
    }
  }, [hierarchyContainerRef])

  return (
    <Box ref={hierarchyContainerRef}> …

您将一个容器传递给 root.render(...) 的第二个参数。您不需要再次传递它，因为您已经传递了它来创建根。

我看过很多赞扬 Bloc State 管理的教程，它有什么特别之处，我应该作为初学者学习它吗？如果没有，是否有任何初学者友好的状态管理技术？

我试图设置状态以响应Api onClick。状态获得更新，但是当我第一次单击时没有更新，第二次单击是的，它的确更新了。

     fetch(URL)
          .then(res => res.json())
          .then(res => {
            this.setState({
              recipesList: res
            });
          });
    console.log(this.state.recipesList);


  };

有人能帮我吗 ？

我是新来的反应，我试图使用 APIfetch和setState状态变量命中 API ，但它抛出错误为

Unhandled Rejection (TypeError): Object(...) is not a function

这是代码-> CodeSandboxLink

import React from "react";
import { useState, useEffect, setState } from "react";
import "./styles.css";

export default function App() {
  const [person, setPerson] = useState([]);
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      setState(data);
    });
  console.log("dasdasd", person);
  return <div className="App">{JSON.stringify(person)}</div>;
}

请建议我哪里做错了。