0

我正在学习本机反应。我没有弄清楚这个问题。我一直在我的项目中使用功能组件。这是我不明白转换类组件状态：

 constructor(props) {
        super(props)
        this.state = {
          center: { lat: 5.6219868, lng: -0.23223 },
          locations: {},
          users_online: [],
          current_user: ''
        }
      }

   /* this.setState((prevState, props) => { 
              let newState = { ...prevState };
              newState.center = location;
              newState.locations[`${prevState.current_user}`] = location;
              return newState;
            }); */ ==> I wan't to convert to functional component this state.

谢谢你的回答。！

4

2 回答 2

2

这很简单，尽管我建议你在 react中检查钩子概念。

const [data, setData] = useState({
          center: { lat: 5.6219868, lng: -0.23223 },
          locations: {},
          users_online: [],
          current_user: ''
        });



//one way
         setData((prevState) => ({ 
             ...prevState,
             center = location;
             locations[`${prevState.current_user}`] = location;
            }));

//another way
    
    const handleTextChange = (text,field) => {
        setStates(prev => ({
            ...prev,
            [field]: text,
        }))
    };;

此外，您还可以主控 4 个不同的状态。

const [center, setCenter] = useState({ lat: 5.6219868, lng: -0.23223 });
const [locations, setLocations] = useState({});
const [usersOnline, setUsersOnline] = useState([]);
const [currentUser, setCurrentUser] = useState('');
于 2022-01-14T08:20:32.747 回答
1

这是一个广泛的问题，我认为您应该遵循任何 hooks 入门教程来了解发生了什么。无论如何，在您的情况下，您首先需要将其更改为函数而不是类，然后使用 useState 指定您拥有的四个状态值。对于批量更新，将状态设置函数包装在一个不稳定的批处理更新方法中，以触发多个状态更新的单个重新渲染。请记住，最后一种方法是不稳定的，将来可能会改变，但现在可以完成工作。

于 2022-01-14T06:46:06.407 回答